Bordes CSS
Las propiedades de borde de CSS le permiten especificar el estilo, el ancho y el color del borde de un elemento.
Tengo fronteras en todos los lados.
Tengo un borde inferior rojo.
Tengo bordes redondeados.
Estilo de borde CSS
La border-style
propiedad especifica qué tipo de borde mostrar.
Se permiten los siguientes valores:
dotted
- Define un borde punteadodashed
- Define un borde discontinuosolid
- Define un borde sólidodouble
- Define un borde doblegroove
- Define un borde ranurado 3D. El efecto depende del valor del color del borde.ridge
- Define un borde estriado 3D. El efecto depende del valor del color del borde.inset
- Define un borde de inserción 3D. El efecto depende del valor del color del borde.outset
- Define un borde inicial 3D. El efecto depende del valor del color del borde.none
- No define ningún bordehidden
- Define un borde oculto
La border-style
propiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Ejemplo
Demostración de los diferentes estilos de borde:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Resultado:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Nota: ¡Ninguna de las OTRAS propiedades de borde CSS (sobre las que aprenderá más en los próximos capítulos) tendrá NINGÚN efecto a menos que se establezca la
border-style
propiedad!