Propiedad border-style de CSS

La propiedad border-style de CSS establece el estilo de los cuatro lados del borde de un elemento. Es una propiedad abreviada para definir border-top-style, border-bottom-style, border-left-style, border-right-style.

Esta propiedad acepta de uno a cuatro valores. Por lo tanto, cada lado puede tener su propio valor.

El valor predeterminado de border-style es none. Los bordes se colocan encima del fondo del elemento.

También debes saber que algunos navegadores no admiten ciertos estilos. Por lo general, cuando un estilo no es compatible, el navegador dibuja el borde como uno sólido.

La propiedad border-style se define utilizando uno, dos, tres o cuatro valores. Cuando se define un valor, se aplica el mismo estilo a los cuatro lados. Cuando se definen dos valores, el primer estilo se aplica a los lados superior e inferior, y el segundo a los lados izquierdo y derecho. Cuando se especifican tres valores, el primer estilo se aplica al superior, el segundo a los lados izquierdo y derecho, y el tercero al inferior. Cuando se especifican cuatro valores, los estilos se aplican al superior, derecho, inferior e izquierdo, en orden de las agujas del reloj.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No.
Animable	No.
Versión	CSS1
Sintaxis DOM	object.style.borderStyle = "dotted double";

Sintaxis

Sintaxis de la propiedad border-style de CSS

css

border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;

Ejemplo de la propiedad border-style:

Ejemplo de la propiedad CSS border-style con valor dotted

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-style: dotted;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example of dotted border-style.</p>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad border-style donde cada lado tiene su propio valor:

Ejemplo de la propiedad CSS border-style con valores double, solid, dashed y dotted

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-width: 4px;
        border-style: double solid dashed dotted;
        border-color: #1c87c9;
        color: #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Example, where each side has own value.</p>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad CSS border-style

Ejemplo de la propiedad border-style con todos los valores:

Ejemplo de la propiedad CSS border-style con valores hidden, double, solid, dashed, dotted, groove, ridge, inset y outset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #eee;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 8px solid #1c87c9;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-style example classes */
      .b1 {
        border-style: hidden;
      }
      .b2 {
        border-style: dotted;
      }
      .b3 {
        border-style: dashed;
      }
      .b4 {
        border-style: solid;
      }
      .b5 {
        border-style: double;
      }
      .b6 {
        border-style: groove;
      }
      .b7 {
        border-style: ridge;
      }
      .b8 {
        border-style: inset;
      }
      .b9 {
        border-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Pruébalo
none	No muestra ningún borde. Valor predeterminado.	Pruébalo »
hidden	Igual que "none", excepto en la resolución de conflictos de bordes para elementos de tabla.	Pruébalo »
dotted	El borde se especifica como una serie de puntos.	Pruébalo »
dashed	El borde se especifica como una serie de trazos.	Pruébalo »
solid	El borde se especifica como líneas sólidas.	Pruébalo »
double	El borde se especifica como dos líneas sólidas.	Pruébalo »
groove	Es un borde acanalado en 3D y da la impresión de que el borde está tallado. Opuesto a ridge.	Pruébalo »
ridge	Especifica un borde con crestas en 3D y da la impresión de un aspecto extruido. Opuesto a groove.	Pruébalo »
inset	Es un efecto 3D que da la impresión de que el elemento aparece incrustado. Opuesto a outset.	Pruébalo »
outset	Es un efecto 3D que da la impresión de que el elemento aparece en relieve. Opuesto a inset.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Te resulta útil?

Propiedad border-style de CSS ​

Sintaxis ​

Ejemplo de la propiedad border-style: ​

Ejemplo de la propiedad border-style donde cada lado tiene su propio valor: ​

Resultado ​

Ejemplo de la propiedad border-style con todos los valores: ​

Valores ​

Práctica ​

Propiedad border-style de CSS

Sintaxis

Ejemplo de la propiedad border-style:

Ejemplo de la propiedad border-style donde cada lado tiene su propio valor:

Resultado

Ejemplo de la propiedad border-style con todos los valores:

Valores

Práctica