Lados del borde CSS
Borde CSS - Lados individuales
De los ejemplos de las páginas anteriores, ha visto que es posible especificar un borde diferente para cada lado.
En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecho, inferior e izquierdo):
Ejemplo
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Resultado:
Different Border Styles
El ejemplo anterior da el mismo resultado que este:
Ejemplo
p {
border-style: dotted solid;
}
Pues así es como funciona:
Si la border-style
propiedad tiene cuatro valores:
- estilo de borde: punteado sólido doble punteado;
- el borde superior está punteado
- el borde derecho es sólido
- borde inferior es doble
- el borde izquierdo está discontinuo
Si la border-style
propiedad tiene tres valores:
- estilo de borde: doble sólido punteado;
- el borde superior está punteado
- los bordes derecho e izquierdo son sólidos
- borde inferior es doble
Si la border-style
propiedad tiene dos valores:
- estilo de borde: sólido punteado;
- los bordes superior e inferior están punteados
- los bordes derecho e izquierdo son sólidos
Si la border-style
propiedad tiene un valor:
- estilo de borde: punteado;
- los cuatro bordes están punteados
Ejemplo
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
La border-style
propiedad se utiliza en el ejemplo anterior. Sin embargo, también funciona con
border-width
y border-color
.