CSS - estilo de borde

Descripción

La propiedad de estilo de borde le permite seleccionar uno de los siguientes estilos de borde:

none- Sin borde. (Equivalente de ancho de borde: 0;)
solid - El borde es una sola línea sólida.
dotted - El borde es una serie de puntos.
dashed - El borde es una serie de líneas cortas.
double - El borde son dos líneas continuas.
groove - El borde parece tallado en la página.
ridge - El borde se ve lo opuesto al surco.
inset - El borde hace que parezca que el cuadro está incrustado en la página.
outset - El borde hace que parezca que la caja está saliendo del lienzo.
hidden - Igual que ninguno, excepto en términos de resolución de conflictos fronterizos para elementos de tabla.

Puede cambiar individualmente el estilo de los bordes inferior, izquierdo, superior y derecho de un elemento utilizando las siguientes propiedades:

border-bottom-style - cambia el estilo del borde inferior.
border-top-style - cambia el estilo del borde superior.
border-left-style - cambia el estilo del borde izquierdo.
border-right-style - cambia el estilo del borde derecho.

Valores posibles

Cualquiera de los valores definidos anteriormente.

Se aplica a

Todos los elementos HTML.

Sintaxis DOM

object.style.borderStyle = "Any of the values defined above";

Ejemplo

A continuación se muestra el ejemplo para mostrar todos estos estilos de borde:

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   
   </body>
</html>

Esto producirá el siguiente resultado:

↰ Previous page