CSS 3: Bordes

La futura recomendación CSS 3: Fondos y bordes, actualmente (octubre de 2016) en elaboración, permite definir bordes en cualquier elemento.

Propiedades de bordes CSS 2

Las propiedades relacionadas con bordes definidas en la recomendación CSS 2.1 y que también se encuentran en la futura recomendación CSS 3: Fondos y bordes son las siguientes:

Estas propiedades se explican detalladamente en la lección CSS 2/3: Bordes.

Imágenes de bordes: border-image

La propiedad compuesta border-image

Por escribir

Imagen de borde: border-image-source

La propiedad border-image-source establece la imagen a utilizar como imagen de borde.

El elemento tiene que tener definido un borde y la imagen se amplía o reduce para mostrarse completa.

Si sólo se utiliza esta propiedad, la imagen se muestra en las cuatro esquinas del elemento.

p {
  border: black 50px solid;
  border-image-source: url("bola.png");
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Bola azul

Troceado de la imagen de borde: border-image-slice

La propiedad border-image-slice permite trocear la imagen de borde de manera que cada trozo se emplee en un lado del borde.

Los posibles valores de la propiedad border-image-slice son:

p {
  border: silver 27px solid;
  border-image-source: url("pastilla_60.png");
  border-image-slice: 27;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 27px solid;
  border-image-source: url("pastilla_60.png");
  border-image-slice: 27 fill;

  padding: 10px;
  color: white;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 75px solid;
  border-image-source: url("marco_200.png");
  border-image-slice: 75;

  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver black 10px;
  border-width: 50px 80px 20px 80px;
  border-image-source: url("ventana.png");
  border-image-slice: 50 80 20 80;

  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de fondo

La propiedad border-image-slice establece cómo se recorta la imagen, pero el tamaño de la imagen se escala al ancho del borde:

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 40px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Área de la imagen de borde: border-image-width

La propiedad border-image-width permite definir el tamaño del espacio ocupado por la imagen de borde:

Los posibles valores de la propiedad border-image-width son:

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;
  border-image-width: 20px 40px;

  padding: 10px;
  text-align: justify;
}

/*
 El tamaño de la imagen de borde es:
 - 20 px arriba y abajo
 - 40 px a derecha e izquierda
*/

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;
  border-image-width: 25%;

  padding: 10px;
  text-align: justify;
}

/*
 El tamaño de la imagen de borde es:
 - 25% en los cuatro lados
*/

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;
  border-image-width: 1 3;

  padding: 10px;
  text-align: justify;
}

/*
 El tamaño de la imagen de borde es:
 - 10 px (1 * 10 px) arriba y abajo
 - 30 px (3 * 10 px) a derecha e izquierda
*/

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;
  border-image-width: auto;

  padding: 10px;
  text-align: justify;
}

/*
 El tamaño de la imagen de borde es:
 - 21 px en los cuatro lados
*/

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Extensión del área de la imagen de borde: border-image-outset

La propiedad border-image-outset permite extender la imagen de borde más allá del elemento.

Los posibles valores de la propiedad border-image-outset son:

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;
  border-image-outset: 10px;

  padding: 10px;
  text-align: justify;
}

p.sin-imagen-borde {
  border: silver 10px solid;

  padding: 10px;
  text-align: justify;
}

/*
 La imagen de borde se encuentra:
 - 10 px alrededor del elemento
*/

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

p {
  border: silver 10px solid;
  border-image-source: url("marco_dorado_200.png");
  border-image-slice: 21;
  border-image-outset: 3 1;

  padding: 10px;
  text-align: justify;
}

p.sin-imagen-borde {
  border: silver 10px solid;

  padding: 10px;
  text-align: justify;
}

/*
  La imagen de borde se encuentra:
 - a 30 px (3 * 10 px) arriba y abajo
 -  a10 px (1 * 10 px) a derecha e izquierda
*/

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Repetición de la imagen de borde: border-image-repeat

La propiedad border-image-repeat establece la forma de repetición de la imagen de borde a lo largo del borde.

Los posibles valores de la propiedad border-image-repeat son:

Hueco
p {
  border: silver 40px solid;
  border-image-source: url("hormigas_210.png");
  border-image-slice: 70;
  border-image-repeat: stretch;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Hueco
p {
  border: silver 40px solid;
  border-image-source: url("hormigas_210.png");
  border-image-slice: 70;
  border-image-repeat: repeat;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Hueco
p {
  border: silver 40px solid;
  border-image-source: url("hormigas_210.png");
  border-image-slice: 70;
  border-image-repeat: round;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  border: silver 40px solid;
  border-image-source: url("hormigas_210.png");
  border-image-slice: 70;
  border-image-repeat: space;

  padding: 10px;
  text-align: justify;
}

Las imágenes de bordes permiten utilizar imágenes en los bordes de los elementos. Las imágenes de bordes se introdujeron en CSS 3 y permiten ir más allá de los estilos clásicos de bordes.

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

Bordes de elementos cortados: box-decoration-break

Por escribir

Esta propiedad se define en la recomendación CSS Fragmentation Module Level 3, actualmente (diciembre de 2016) en elaboración.

Sombras: box-shadow

Por escribir