La propiedad border-style especifica qué tipo de borde se mostrará.
Se permiten los siguientes valores:
La propiedad border-style puede tener de uno a cuatro valores (superior, derecho, inferior e izquierdo).
Código
<p class="dotted">Borde punteado.</p>
<p class="dashed">Borde con guiones.</p>
<p class="solid">Línea sólida.</p>
<p class="double">Doble línea.</p>
<p class="groove">Surco.</p>
<p class="ridge">Rugoso.</p>
<p class="inset">Borde interior.</p>
<p class="outset">Borde exterior.</p>
<p class="none">Sin borde.</p>
<p class="hidden">Borde oculto.</p>
<p class="mix">Borde mixto.</p>
Resultado
Borde punteado.
Borde con guiones.
Línea sólida.
Doble línea.
Surco.
Rugoso.
Borde interior.
Borde exterior.
Sin borde.
Borde oculto.
Borde mixto.
La propiedad border-width especifica la anchura de los cuatro bordes.
Puede definirse en px, pt, cm, em, etc., o mediante los valores predefinidos: fino, medio o grueso.
Texto
Texto
Texto
Texto
Texto
Texto
Texto
La propiedad border-color se utiliza para establecer el color de los cuatro bordes.
Borde sólido rojo
Borde sólido verde
Borde multicolor
Es posible especificar un estilo de borde distinto para cada lado.
La propiedad border permite definir border-width, border-style y border-color en una sola línea.
La propiedad border-radius se utiliza para añadir bordes redondeados.
<p class="normal">Borde normal</p>
<p class="round1">Redondeado 1</p>
<p class="round2">Redondeado 2</p>
<p class="round3">Redondeado 3</p>
Nota: La propiedad "border-radius" no está soportada por IE8 ni versiones anteriores.
| Propiedad | Descripción |
|---|---|
| border | Cambia todos los bordes |
| border-bottom | Borde inferior |
| border-bottom-color | Color del borde inferior |
| border-bottom-style | Estilo del borde inferior |
| border-bottom-width | Ancho del borde inferior |
| border-color | Color de los cuatro bordes |
| border-left | Borde izquierdo |
| border-left-color | Color del borde izquierdo |
| border-left-style | Estilo del borde izquierdo |
| border-left-width | Ancho del borde izquierdo |
| border-radius | Esquinas redondeadas |
| border-right | Borde derecho |
| border-right-color | Color del borde derecho |
| border-right-style | Estilo del borde derecho |
| border-right-width | Ancho del borde derecho |
| border-style | Estilo de los cuatro bordes |
| border-top | Borde superior |
| border-top-color | Color del borde superior |
| border-top-style | Estilo del borde superior |
| border-top-width | Ancho del borde superior |
| border-width | Ancho de todos los bordes |
Lenguaje CSS3