Las líneas alrededor de la caja, sus esquinas redondeadas, el contorno del foco y las sombras.
border: Abreviada del borde.
border-radius: Redondea las esquinas.
outline: Un contorno por fuera del borde que no ocupa espacio.
box-shadow: Sombras de la caja.
Las líneas alrededor de la caja, sus esquinas redondeadas, el contorno del foco y las sombras.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Abreviada del borde: grosor, estilo y color. Por lados: border-top, -right, -bottom, -left (y border-inline, border-block). Sin estilo, no se ve.
Valores: 2px solid #1d3557, 1px dashed currentColor, none
El grosor del borde, con 1 a 4 valores como margin.
Valores: 1px, thin, medium, thick, 0 0 4px
El estilo de la línea del borde.
Valores: solid, dashed, dotted, double, groove, ridge, inset, outset, none
El color del borde (por defecto, el del texto).
Valores: cualquier color, con 1 a 4 valores
Esencial. Redondea las esquinas. Un valor para las cuatro, o uno por esquina; con 50% en un cuadrado, un círculo. Por esquina: border-top-left-radius…
Valores: 8px, 50%, 999px (pastilla), 1rem 0
Usa una imagen o un degradado como borde.
Valores: linear-gradient(…) 1, url(marco.png) 30 round
Esencial. Un contorno por fuera del borde que no ocupa espacio. Lo dibuja el navegador al llevar el foco con el teclado: no lo quites sin poner otro.
Valores: 2px solid #fcbf49, none
La separación entre el contorno y el borde.
Valores: 2px, 4px, -2px
Esencial. Sombras de la caja: desplazamiento x, y, desenfoque, extensión y color. Con inset, por dentro. Se pueden poner varias separadas por comas.
Valores: 0 4px 12px rgb(0 0 0 / 20%), inset 0 0 0 2px #1d3557, none
Las líneas alrededor de la caja, sus esquinas redondeadas, el contorno del foco y las sombras.
Código del tema: .caja { border: 3px solid #1d3557; }
Las líneas alrededor de la caja, sus esquinas redondeadas, el contorno del foco y las sombras.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Abreviada del borde: grosor, estilo y color. Por lados: border-top, -right, -bottom, -left (y border-inline, border-block). Sin estilo, no se ve.
Valores: 2px solid #1d3557, 1px dashed currentColor, none
El grosor del borde, con 1 a 4 valores como margin.
Valores: 1px, thin, medium, thick, 0 0 4px
El estilo de la línea del borde.
Valores: solid, dashed, dotted, double, groove, ridge, inset, outset, none
El color del borde (por defecto, el del texto).
Valores: cualquier color, con 1 a 4 valores
Esencial. Redondea las esquinas. Un valor para las cuatro, o uno por esquina; con 50% en un cuadrado, un círculo. Por esquina: border-top-left-radius…
Valores: 8px, 50%, 999px (pastilla), 1rem 0
Usa una imagen o un degradado como borde.
Valores: linear-gradient(…) 1, url(marco.png) 30 round
Esencial. Un contorno por fuera del borde que no ocupa espacio. Lo dibuja el navegador al llevar el foco con el teclado: no lo quites sin poner otro.
Valores: 2px solid #fcbf49, none
La separación entre el contorno y el borde.
Valores: 2px, 4px, -2px
Esencial. Sombras de la caja: desplazamiento x, y, desenfoque, extensión y color. Con inset, por dentro. Se pueden poner varias separadas por comas.
Valores: 0 4px 12px rgb(0 0 0 / 20%), inset 0 0 0 2px #1d3557, none