Saltar al contenido principal

Borde

Propiedades que permiten aplicar estilos al borde de la caja son los mostrados a continuación.

border-color​

Aplica un color de borde.

Los valores permitidos son:

  • Color en alguna de las notaciones permitidas.
  • transparent

Variantes​

p {
    border-top-color: red;
    border-bottom-color: blue;
    border-right-color: green;
    border-left-color: yellow;
}

Múltiples valores​

La propiedad border-color tiene diferentes comportamientos según los valores que le indiquemos:

  • Con 1 valor: se aplica a los cuatro lados.
  • Con 2 valores: el primero se aplica a superior e inferior y, el segundo, a los lados izquierdo y derecho.
  • Con 3 valores: se aplica el primero, al superior; el segundo, a los laterales; y el tercero al inferior.
  • Con 4 valores: se aplica a superior, derecho, inferior, izquierdo.
p { border-color: red; }
p { border-color: red blue; }
p { border-color: red blue green; }
p { border-color: red blue green yellow; }

border-width​

Define el ancho del borde.

Los valores permitidos son:

  • Una longitud.
  • thin
  • medium
  • thick

Variantes​

p {
    border-top-width: 1px;
    border-bottom-width: 2px;
    border-right-width: 3px;
    border-left-width: 4px;
}

Múltiples valores​

La propiedad border-width tiene diferentes comportamientos según los valores que le indiquemos:

  • Con 1 valor: se aplica a los cuatro lados.
  • Con 2 valores: el primero se aplica a superior e inferior y, el segundo, a los lados izquierdo y derecho.
  • Con 3 valores: se aplica el primero, al superior; el segundo, a los laterales; y el tercero al inferior.
  • Con 4 valores: se aplica a superior, derecho, inferior, izquierdo.
p { border-width: 1px; }
p { border-width: 1px 2px; }
p { border-width: 1px 2px 3px; }
p { border-width: 1px 2px 3px 4px; }

border-style​

Define el estilo de la línea que delimita el borde.

Los valores permitidos son:

  • solid
  • dashed
  • dotted
  • double
  • ridge
  • groove
  • inset
  • outset
  • hidden
  • none

Variantes​

p {
    border-top-style: solid;
    border-bottom-style: dashed;
    border-right-style: dotted;
    border-left-style: double;
}

Múltiples valores​

La propiedad border-style tiene diferentes comportamientos según los valores que le indiquemos:

  • Con 1 valor: se aplica a los cuatro lados.
  • Con 2 valores: el primero se aplica a superior e inferior y, el segundo, a los lados izquierdo y derecho.
  • Con 3 valores: se aplica el primero, al superior; el segundo, a los laterales; y el tercero al inferior.
  • Con 4 valores: se aplica a superior, derecho, inferior, izquierdo.
p { border-style: solid; }
p { border-style: solid dashed; }
p { border-style: solid dashed dotted; }
p { border-style: solid dashed dotted double; }

border-radius​

Aplica un borde redondeado.

div {
    border-radius: 50%;
}

Los valores permitidos son:

  • Una longitud.
  • Un porcentaje.

Variantes​

div {
    border-top-radius: 6px;
    border-bottom-radius: 6px;
    border-right-radius: 6px;
    border-left-radius: 6px;
}

Múltiples valores​

La propiedad border-radius tiene diferentes comportamientos según los valores que le indiquemos:

  • Con 1 valor: se aplica a los cuatro lados.
  • Con 2 valores: el primero se aplica a superior e inferior y, el segundo, a los lados izquierdo y derecho.
  • Con 3 valores: se aplica el primero, al superior; el segundo, a los laterales; y el tercero al inferior.
  • Con 4 valores: se aplica a superior, derecho, inferior, izquierdo.
p { border-radius: 1px; }
p { border-radius: 1px 2px; }
p { border-radius: 1px 2px 3px; }
p { border-radius: 1px 2px 3px 4px; }