w3.unpo<code>todo

La propiedad border

La propiedad border establece en una declaración abreviada las propiedades border-width ( anchura ), border-style ( estilo ), y border-color ( color ).

La sintaxis es la siguiente: donde las propiedades entre corchetes ([...]) son opcionales.

Ejemplos

{border: solid;}
 /*estilo*/
.a{border: solid;}
 /*estilo color*/
.b{border: dashed red;}
 /*anchura estilo*/
.c{border: 1rem solid;}
 /*anchura estilo color*/
.d{border: thick double #6ab150;}

border-width

Representa la declaración abreviada de border-top-width ( la anchura del borde superior ), border-right-width ( la anchura del borde derecho ), border-bottom-width ( la anchura del borde inferior ), y border-left-width ( la anchura del borde izquierdo ).
En el caso en que utilizamos la propiedad writing-mode que cambia la dirección del texto las cosas vuelven a ser algo confusas. Por ejemplo si utilizamos writing-mode: vertical-lr; el texto aparece escrito verticalmente y de iquierda a derecha. El borde que marca la base del texto sería en este caso el borde izquierdo. Podemos eludir este problema utilizando las propiedades border-block-start-width, border-block-end-width, border-inline-start-width y border-inline-end-width.

Es posible utilizar palabras clave: thin ( fino ), medium ( medio ) y thick ( ancho ). También podemos utilizar unidades como px, em, etc... para establecer la anchura del borde.

La anchura del borde puede ser especificada utilizando uno, dos, tres o cuatro valores
Algunos ejemplos

/* todos los bordes de la caja son iguales */
border-width: 1.2rem;

/* arriba y abajo | izquierda y derecha */
border-width: 2px 1.5em;

/* arriba | izquierda y derecha | abajo */
border-width: 1px 2em 1.5cm;

/* arriba | derecha | abajo | izquierda */
border-width: 1px 2em 0 4rem;

border-style

La propiedad border-style se utiliza para establecer el estilo de borde y representa la declaración abreviada de border-top-style ( el estilo del borde superior ), border-right-style ( el estilo del borde derecho ), border-bottom-style ( el estilo del borde inferior ), y border-left-style ( el estilo del borde izquierdo ).

El estilo del borde puede ser especificado utilizando uno, dos, tres o cuatro valores.

Algunos ejemplos:

/* todos los bordes de la caja tienen el mismo estilo */
border-style: outset;

/* arriba y abajo | izquierda y derecha */
border-style: dotted solid;

/* arriba | izquierda y derecha | abajo */
border-style: hidden double dashed;

/* arriba | derecha | abajo | izquierda */
border-style: none solid dotted dashed;

Las palabras clave utilizadas son: none ( ninguno ) hidden ( oculto ) dotted ( ínea de puntos ) dashed ( línea discontinua ) solid ( línea continua ) double ( doble ) groove ( ranura ) ridge ( reborde ) inset ( pa'dentro ) outset ( pa'fuera ).

Algunos ejemplos

See the Pen border-style*** by Gabi (@enxaneta) on CodePen.

border-color

La propiedad border-color se utiliza para establecer el color del borde y representa la declaración abreviada de border-top-color ( el color del borde superior ), border-right-color ( el color del borde derecho ), border-bottom-color ( el color del borde inferior ), y border-left-color ( el color del borde izquierdo ).
En el caso en que utilizamos la propiedad writing-mode que cambia la dirección del texto las cosas vuelven a ser algo confusas. Por ejemplo si utilizamos writing-mode: vertical-lr; el texto aparece escrito verticalmente y de iquierda a derecha. El borde que marca la base del texto sería en este caso el borde izquierdo. Podemos eludir este problema utilizando las propiedades border-block-start-color, border-block-end-color, border-inline-start-color y border-inline-end-color.

Como las demás propiedades del border, el color puede ser especificado utilizando uno, dos, tres o cuatro valores

/* todos los bordes de la caja tienen el mismo estilo */
border-color: Black;

/* arriba y abajo | izquierda y derecha */
border-color: Black Silver;

/* arriba | izquierda y derecha | abajo */
border-color: Black Silver DarkGray;

/* arriba | derecha | abajo | izquierda */
border-color: Black Silver DarkGray DimGray;

Podemos utilizar nombres de colores ( en inglés ) colores hex, rgb o hsl