CSS Border

Un borde es una línea trazada alrededor de los bordes del cuadro de un elemento, entre su padding y su margen. Los bordes son una de las formas más comunes de separar visualmente el contenido, resaltar un cuadro o construir elementos de UI como tarjetas, botones y campos de entrada.

Cada borde tiene tres ingredientes, y casi siempre se establecen los tres:

width — qué tan gruesa es la línea (p. ej. 2px, thin, thick).
style — cómo se ve la línea (p. ej. solid, dashed, dotted). Esta es la propiedad que debe estar presente — sin un border-style, el navegador no muestra ningún borde, incluso si se establece un ancho y un color.
color — el color de la línea (p. ej. red, #1c87c9, rgb(0,0,0)).

Puedes establecer estos valores individualmente con border-width, border-style y border-color, o todos a la vez con la abreviatura border. El resto de este capítulo explica cada opción.

Ejemplo de la propiedad border:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Example with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Border Width

La propiedad border-width establece el ancho de un borde.

El ancho puede especificarse en una unidad de longitud como píxeles (px), em o rem. También puede establecerse con una de tres palabras clave predefinidas: thin, medium o thick. El tamaño exacto de estas palabras clave depende del navegador, pero thin < medium < thick.

No puedes usar border-width por sí sola — no tiene efecto visible sin un border-style, porque el estilo predeterminado es none. Siempre establece el estilo (o usa la abreviatura border) primero.

También puedes dar a border-width hasta cuatro valores para dimensionar cada lado de forma independiente, exactamente como border-style: un valor establece todos los lados, dos establecen arriba/abajo e izquierda/derecha, y cuatro establecen arriba, derecha, abajo e izquierda en sentido horario.

Ejemplo de la propiedad border-width:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>

Pruébalo tú mismo »

Border Color

La propiedad border-color se usa para establecer el color de un borde. El color puede especificarse mediante:

nombre - especifica un nombre de color, como "red"
RGB - especifica un valor RGB, como "rgb(255,0,0)"
Hex - especifica un valor hexadecimal, como "#ff0000"

No puedes usar la propiedad "border-color" sola. No funcionará. Usa "border-style" para establecer los bordes primero.

Generalmente, escribimos estas tres propiedades juntas en una misma línea.

Ejemplo de la propiedad border-color:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>

Pruébalo tú mismo »

Observa el último párrafo: cuando se dan cuatro valores a border-color, se aplican a los lados superior, derecho, inferior e izquierdo en ese orden horario.

Border Style

La propiedad CSS border-style establece el estilo de los cuatro lados de los bordes de un elemento. Los bordes se colocan sobre el fondo del elemento. Puede tener de uno a cuatro valores. Así, cada lado puede tener su propio valor. El valor predeterminado de border-style es none.

Border-style tiene los siguientes valores:

dotted
dashed
solid
double
groove
ridge
inset
outset

Esto es lo que significa cada valor:

dotted — una serie de puntos redondos.
dashed — una serie de guiones cortos.
solid — una línea recta continua. Es, con diferencia, el estilo más común.
double — dos líneas sólidas paralelas. El ancho combinado es igual al valor de border-width.
groove — parece que el borde está tallado en la página (efecto 3D).
ridge — lo opuesto de groove; el borde parece sobresalir.
inset — hace que todo el cuadro parezca presionado hacia la página.
outset — hace que el cuadro parezca elevado sobre la página.

Los efectos groove, ridge, inset y outset dependen del color del borde, por lo que se ven sutiles (o invisibles) en un borde delgado o sobre un fondo similar. Usa un border-width de al menos 3px para verlos claramente.

CSS Border para lados individuales

CSS proporciona propiedades que especifican cada borde (derecho, izquierdo, inferior y superior).

La propiedad border-style puede tener 4 valores, por ejemplo, border-style: dotted solid double dashed; donde el borde superior es punteado, el borde inferior es doble, el borde derecho es sólido y el borde izquierdo es discontinuo.

La propiedad border-style puede tener 3 valores, por ejemplo, border-style: dotted solid double; donde el borde superior es punteado, el borde inferior es doble, y los bordes derecho e izquierdo son sólidos.

La propiedad border-style puede tener 2 valores, por ejemplo, border-style: dotted solid; donde los bordes derecho e izquierdo son sólidos, y los bordes superior e inferior son punteados. Y, por supuesto, esta propiedad puede tener solo 1 valor, por ejemplo, border-style: solid; donde todos los lados son sólidos.

Ejemplo de las propiedades border para lados individuales:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>

Pruébalo tú mismo »

CSS border como propiedad abreviada

La propiedad CSS border es una propiedad abreviada para las siguientes propiedades de borde individuales:

La propiedad CSS border-width, que establece el ancho de los cuatro lados del borde de un elemento.
La propiedad CSS border-style, que establece el estilo de los cuatro lados de los bordes de un elemento.
La propiedad CSS border-color, que establece el color de los cuatro lados del borde de un elemento.

Ejemplo de la propiedad abreviada border:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>

Pruébalo tú mismo »

Bordes redondeados

Con la propiedad CSS border-radius, puedes añadir bordes redondeados a un elemento.

Ejemplo de la propiedad border-radius:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>

Pruébalo tú mismo »

La diferencia entre bordes y contornos

Un borde y un contorno ambos trazan una línea alrededor de un elemento, por lo que es fácil confundirlos. Las diferencias clave son:

Un border forma parte del modelo de caja. Se sitúa entre el padding y el margen y ocupa espacio, por lo que añadir un borde puede desplazar el diseño de los elementos circundantes.
Un outline se dibuja fuera del borde y no ocupa espacio, por lo que nunca cambia el tamaño ni la posición del elemento ni de sus vecinos.
Un borde puede tener un estilo, ancho y color diferente en cada lado. Un contorno es igual en los cuatro lados.
Un contorno puede desplazarse del elemento con outline-offset; los bordes no pueden desplazarse.

Como los contornos no afectan al diseño, se usan comúnmente para el estado :focus de botones y enlaces — el anillo de enfoque puede aparecer sin alterar el resto de la página.

Capítulos relacionados

CSS border-width — controla el grosor de cada lado.
CSS border-style — todos los estilos de línea en detalle.
CSS border-color — establece colores por lado.
CSS border-radius — redondea las esquinas.
CSS outline — la alternativa al borde sin impacto en el diseño.
CSS padding — el espacio justo dentro del borde.

Práctica

¿Cuáles de las siguientes son propiedades que se pueden usar para estilizar bordes en CSS?

border-styleborder-colorborder-radiusborder-widthborder-font