Fondos y bordes CSS

El módulo Fondos y bordes CSS proporciona propiedades para agregar bordes, esquinas redondeadas y sombras de caja a los elementos.

Puede agregar diferentes tipos de estilos de borde, incluidos bordes hechos de imágenes de cualquier tipo de imagen, desde imágenes rasterizadas hasta degradados CSS. Los bordes pueden ser cuadrados o redondeados, y se puede establecer un radio diferente para cada esquina. Los elementos se pueden redondear tengan o no un borde visible.

Las sombras de caja incluyen sombras internas y externas, sombras únicas o múltiples, y sólidas o que se desvanecen a transparentes. Una sombra de caja exterior proyecta una sombra como si el cuadro de borde del elemento fuera opaco. Una sombra de caja interna proyecta una sombra como si todo lo que está fuera del borde del relleno fuera opaco. La sombra puede ser sólida o incluir una distancia extendida con el color de la sombra en transición a transparente.

Las propiedades de este módulo también te permiten definir si las celdas dentro de un <table> deben tener bordes compartidos o separados.

Fondos, bordes y sombras de caja en acción

Esta muestra de bordes, fondos y sombras de caja consta de imágenes de fondo centradas hechas de degradados lineales y radiales. Una serie de sombras de caja hacen que el borde parezca "saltar". El elemento de la izquierda tiene un conjunto de imágenes de borde. El elemento de la derecha tiene un borde punteado redondeado.

Las imágenes de fondo se definen con background-image. Las imágenes están centradas con background-position. Se utilizan diferentes valores de la propiedad background-clip para las múltiples imágenes de fondo para hacer que las imágenes de fondo permanezcan dentro de la caja de contenido. El color de fondo se recorta en el cuadro de relleno evitando que el fondo aparezca a través de las secciones transparentes para border-image y dotted border. Las esquinas redondeadas en el elemento de la derecha se crean usando la propiedad border-radius. Se utiliza una única declaración box-shadow para establecer todas las sombras, tanto de entrada como de salida.

Para ver el código de este ejemplo, vea la fuente en GitHub.

Referencia

Propiedades

Tipos de datos

Guías

Aprende CSS: fondo y bordes

Explica cómo implementar imágenes decorativas utilizando imágenes de fondo con CSS.

Usando múltiples fondos

Explica cómo configurar uno o más fondos en un elemento.

Cambiar el tamaño de las imágenes de fondo

Describe cómo cambiar el tamaño y el comportamiento de repetición de las imágenes de fondo.

Aprende CSS: el modelo de caja

Explica cómo los bordes, junto con otras propiedades del modelo de caja, afectan el modelo de caja CSS.

Usando gradientes de CSS

Explica cómo crear imágenes de fondo degradadas con CSS.

Conceptos relacionados

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3

Véase también