CSS Border shorthand Property with syntax, values and examples

La propiedad border de CSS es una propiedad abreviada que establece los valores de border-width, border-style y border-color para los cuatro lados de un elemento. No se permiten valores negativos.

La propiedad abreviada border se utiliza cuando desea que los cuatro lados sean iguales. Puede modificar los bordes mediante las propiedades border-width, border-style y border-color, las cuales permiten establecer valores diferentes para cada lado.

info

Si no se define un valor, los bordes son invisibles.

Valor inicial	medium none currentColor
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No.
Animable	Sí. El ancho, el color y el estilo del borde son animables.
Versión	CSS1
Sintaxis DOM	object.style.border = "5px solid green";

Sintaxis

Sintaxis de la propiedad border de CSS

border: border-width border-style border-color | initial | inherit;

Ejemplo de la propiedad border:

Ejemplo de la propiedad border de CSS con valor sólido

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        border: thick solid #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p>This paragraph's border is set to "thick solid green".</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Consulte otro ejemplo donde el estilo del borde es discontinuo, el ancho se establece en 3px y el color del borde es azul.

Ejemplo de la propiedad border con el valor "dashed":

Ejemplo de la propiedad border de CSS con el valor dashed

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px dashed #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p>This paragraph's border is set to "3px dashed blue".</p>
  </body>
</html>

Pruébalo tú mismo »

Veamos otro ejemplo con border-color donde se aplican 3 valores. El primero se aplica al borde superior, el segundo al derecho e izquierdo, y el tercero al inferior.

Ejemplo de la propiedad border con 3 valores:

Ejemplo de la propiedad border-color de CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 3px solid;
        border-color: #1c87c9 #666 #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <div>Here 3 values are applied to the border-color property.</div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad border-style:

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

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p,
      div {
        padding: 5px;
      }
      .border1 {
        border: 5px solid #ccc;
      }
      .border2 {
        border: 5px dotted #1c87c9;
      }
      div {
        border: thick double #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p class="border1">A heading with a solid gray border.</p>
    <p class="border2">A heading with a dotted blue border.</p>
    <div>A div element with a thick double green border.</div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
border-width	Define el ancho del borde. El valor predeterminado es "medium".
border-style	Define el estilo del borde. El valor predeterminado es "none".
border-color	Define el color del borde. El valor predeterminado es el color actual del elemento.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedad border de CSS

Sintaxis

Ejemplo de la propiedad border:

Resultado

Ejemplo de la propiedad border con el valor "dashed":

Ejemplo de la propiedad border con 3 valores:

Ejemplo de la propiedad border-style:

Valores

Práctica