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

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 Correcto en Edge
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 (diciembre de 2016) en elaboración.

Sombras: box-shadow

Por escribir