CSS: Bordes (2)

En esta lección y en la lección CSS Bordes (1) se comentan las propiedades CSS definidas en la futura recomendación CSS Backgrounds and Borders Module Level 3. Aunque actualmente (octubre de 2021) esta recomendación no está formalmente aprobada, se considera parte de la definición oficial de CSS en CSS Snaphot 2020.

Estas propiedades permiten añadir un borde a cualquier elemento elemento de una página web.

En esta lección se comentan principalmente las propiedades relacionadas con el uso de imágenes en bordes, que no estaban incluidas en CSS 2, publicada en mayo de 1998.

Imágenes de bordes

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;
}

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo

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.png");
  border-image-slice: 27;

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

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 27px solid;
  border-image-source: url("pastilla.png");
  border-image-slice: 27 fill;

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

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 75px solid;
  border-image-source: url("marco.png");
  border-image-slice: 75;

  text-align: justify;
}

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 20px solid;
  border-width: 50px 80px 20px 80px;
  border-image-source: url("ventana.png");
  border-image-slice: 50 80 20 80;

  text-align: justify;
}

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo

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.png");
  border-image-slice: 21;

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

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 40px solid;
  border-image-source: url("marco-dorado.png");
  border-image-slice: 21;

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

Imagen utilizada en este ejemplo: Ejemplo de imagen de borde

ERROR (no puede mostrarse el objeto)
Enlace externo

Á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:

Imagen utilizada en estos ejemplos: Ejemplo de imagen de borde

p {
  border: silver 10px solid;
  border-image-source: url("marco-dorado.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
*/
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 10px solid;
  border-image-source: url("marco-dorado.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
*/
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 10px solid;
  border-image-source: url("marco-dorado.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
*/
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 10px solid;
  border-image-source: url("marco-dorado.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
*/
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

Imagen utilizada en estos ejemplos: Ejemplo de imagen de borde

p {
  border: silver 10px solid;
  padding: 10px;
  text-align: justify;
}

p.borde-con-imagen {
  border-image-source: url("marco-dorado.png");
  border-image-slice: 21;
  border-image-outset: 10px;
}

/*
 La imagen de borde se encuentra:
 - 10 px alrededor del elemento
*/
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: silver 10px solid;
  padding: 10px;
  text-align: justify;
}
p.borde-con-imagen {
  border-image-source: url("marco-dorado.png");
  border-image-slice: 21;
  border-image-outset: 3 1;
}

/*
  La imagen de borde se encuentra:
 - a 30 px (3 * 10 px) arriba y abajo
 -  a10 px (1 * 10 px) a derecha e izquierda
*/
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

Imagen utilizada en estos ejemplos: Ejemplo de imagen de borde

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

  padding: 10px;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Hueco
p {
  border: silver 40px solid;
  border-image-source: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: repeat;

  padding: 10px;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Hueco
p {
  border: silver 40px solid;
  border-image-source: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: round;

  padding: 10px;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  border: silver 40px solid;
  border-image-source: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: space;

  padding: 10px;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Bordes de elementos cortados: box-decoration-break

Por escribir

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

Sombras: box-shadow

Por escribir