Bordes y outlines

Temario Bordes y outlines

1. Propiedad border-radius
2. Propiedad outline

Propiedad border-radius

Border-Radius es una propiedad para redondear los bordes

Border-Radius es un shorthand para:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Enlace a documentacion de la propiedad border-radius en MDN.

Ejemplos:

Propiedad outline

El outline se podria definir como un borde externo, pero no hace parte del box model (modelo de caja) por eso la caja no aumenta de tamño al aplicarle el outline.

Recibe las sihuientes propiedades:

• outline-width
• outline-style
• outline-color
• outline-offset: Genera otro borde externo, (que no hace parte de la caja), pero dejando una distancia del borde externo de la caja.
  El valor qeu se le da a esta propiedad puede ser positivo o negativo.

Los elementos donde masa se puede usar la propiedad outline son loe elementos de formulario como input, textarea, checkbox, radioboton.

Ejemplos: