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` (en-US). 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

* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `background` abreviatura
* `background-position-x` (en-US) 
Experimental
* `background-position-y` (en-US) 
Experimental
* `background-position-inline` 
Experimental
* `background-position-block` 
Experimental
* `border-bottom-color`
* `border-bottom-style`
* `border-bottom-width`
* `border-bottom` abreviatura
* `border-left-color`
* `border-left-style` (en-US)
* `border-left-width` (en-US)
* `border-left` abreviatura
* `border-right-color` (en-US)
* `border-right-style` (en-US)
* `border-right-width` (en-US)
* `border-right` abreviatura
* `border-top-color`
* `border-top-style` (en-US)
* `border-top-width` (en-US)
* `border-top` abreviatura
* `border-color` abreviatura
* `border-style` abreviatura
* `border-width` abreviatura
* `border` abreviatura
* `border-collapse`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-radius` (en-US) abreviatura
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source` (en-US)
* `border-image-width` (en-US)
* `border-image` abreviatura
* `box-shadow`
### Tipos de datos

* Tipo enumerado `line-type`
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 (en-US)

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

* Propiedad `border-block-end-color`
* Propiedad `border-block-start-color`
* Propiedad `border-inline-end-color`
* Propiedad `border-inline-start-color`
* Propiedad `border-block-end-style`
* Propiedad `border-block-start-style`
* Propiedad `border-inline-end-style`
* Propiedad `border-inline-start-style`
* Propiedad `border-block-end-width`
* Propiedad `border-block-start-width`
* Propiedad `border-inline-end-width`
* Propiedad `border-inline-start-width`
* Propiedad `border-start-start-radius`
* Propiedad `border-start-end-radius`
* Propiedad `border-end-start-radius`
* Propiedad `border-end-end-radius`
* Propiedad `box-sizing`
* Propiedad `box-decoration-break` (en-US)
* Propiedad `text-shadow`
* Función CSS `url()`
* Tipo de dato `<color>`
* Tipo de dato `<image>`
* Tipo de dato `<position>`
* Palabra clave `currentcolor`
Especificaciones
----------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |

Véase también
-------------

* Herramientas interactivas que le permiten crear visualmente imágenes de bordes, esquinas redondeadas y sombras de caja:
    + Generador de bordes con imágenes
    + Generador de bordes con radio
    + Generador de sombra de caja (en-US)
* Aplicando color a elementos HTML usando CSS (en-US), incluso para bordes.
* La función de filtro `drop-shadow()` (en-US) que aplica un efecto de sombra a la imagen de entrada. La función es utilizada por las propiedades `filter` y `backdrop-filter`.