--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/bordes-sombras' title: 'Añade bordes, esquinas redondeadas y sombras | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:11:40+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Enmarca una tarjeta, redondea las esquinas de una foto o levanta un recuadro de la página con una sombra. Todo esto se define en el panel Style del elemento, y puedes cambiarlo en hover en el panel Hover style. Úsalo para que una tarjeta destaque. Para el mismo marco en una serie entera de tarjetas, una clase compartida las mantiene iguales. El vídeo sigue la receta de abajo: convierte un bloque de texto en una tarjeta con borde, esquinas redondeadas y una sombra que se intensifica en hover. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade bordes, esquinas redondeadas y sombras' description: |- Enmarca una tarjeta, redondea las esquinas de una foto o levanta un recuadro de la página con una sombra. Todo esto se define en el panel Style del elemento, y puedes cambiarlo en hover en el panel Hover style. Úsalo para que una tarjeta destaque. Para el mismo marco en una serie entera de tarjetas, una clase compartida las mantiene iguales. El vídeo sigue la receta de abajo: convierte un bloque de texto en una tarjeta con borde, esquinas redondeadas y una sombra que se intensifica en hover. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:11:40+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/bordes-sombras' articleSection: 'Da estilo a tus elementos' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/bordes-sombras' description: |- Enmarca una tarjeta, redondea las esquinas de una foto o levanta un recuadro de la página con una sombra. Todo esto se define en el panel Style del elemento, y puedes cambiarlo en hover en el panel Hover style. Úsalo para que una tarjeta destaque. Para el mismo marco en una serie entera de tarjetas, una clase compartida las mantiene iguales. El vídeo sigue la receta de abajo: convierte un bloque de texto en una tarjeta con borde, esquinas redondeadas y una sombra que se intensifica en hover. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) # Añade bordes, esquinas redondeadas y sombras. Aprende DXPR BuilderCrear páginasDa estilo a tus elementos ## En esta guía Guías relacionadas - [Añade espacio dentro y alrededor de los elementos](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado) Enmarca una tarjeta, redondea las esquinas de una foto o levanta un recuadro de la página con una sombra. Todo esto se define en el panel **Style** del elemento, y puedes cambiarlo en hover en el panel **Hover style**. Úsalo para que una tarjeta destaque. Para el mismo marco en una serie entera de tarjetas, una clase compartida las mantiene iguales. El vídeo sigue la receta de abajo: convierte un bloque de texto en una tarjeta con borde, esquinas redondeadas y una sombra que se intensifica en hover. ## Antes de empezar - Abre la página en DXPR Builder; señalar un elemento muestra su barra de controles con **More**. ¿No conoces el constructor? Consulta [Crea tu primera página](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina). - **Save** en el diálogo conserva un cambio en el editor. **Save** en la barra de herramientas del constructor, sobre tu contenido, guarda la página y muestra "Saved field". - **Destaca una sola cosa.** Un borde o una sombra atrae la mirada a una fecha clave, una oferta o una cita. Ponlo en todo y deja de funcionar. - **Mantén una serie igual.** Para el mismo marco en muchas tarjetas, guarda una tarjeta como plantilla o usa una clase compartida. Consulta [ID y clases HTML](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/css-personalizado). - **Deja que el tema ajuste las sombras.** Los cinco niveles de **Drop shadow** se definen una vez para todo el sitio. Tu tema puede rediseñar un nivel, y cada elemento que lo usa lo sigue. ## Receta: una tarjeta destacada Obtienes un recuadro suave con un borde fino en tu color de marca. Tiene esquinas redondeadas y una sombra que crece en hover. 1. Pasa el cursor sobre el elemento **Text**, haz clic en **More** y luego en **Settings**. 2. Abre el panel **Style**. El modelo de caja está arriba. Sus candados empiezan abiertos; haz clic en el candado junto a **Padding** para cerrarlo, así sus cuatro lados se mueven juntos. 3. Haz clic en el lado superior de **Padding**, escribe 32 y pulsa Enter. Los cuatro lados ahora dicen 32px. 4. Elige un **Background** claro, como un gris pálido. 5. Pon **Border style** en **Solid**. 6. Cierra el candado junto a **Border**, luego haz clic en uno de sus lados, escribe 1 y pulsa Enter. 7. Elige un **Border color**, pon **Border radius** en 16 y **Drop shadow** en 3. 8. Abre el panel **Hover style** y pon **Drop shadow** en 5. 9. Haz clic en **Save** en el diálogo y luego en **Save** en la barra de herramientas. 10. Elige **Preview** en el menú de vista (el icono del ojo) y señala la tarjeta. Su sombra se intensifica. ## Lo que ves La tarjeta tiene un borde fino en tu color, esquinas redondeadas y una sombra suave debajo. En **Preview**, la sombra se intensifica mientras el puntero está sobre la tarjeta y vuelve atrás cuando sale. ## Cómo se construye un borde Un borde necesita tres ajustes, y el panel los reparte. Define los tres: 1. **Border style** elige la línea: **Solid**, **Dotted** o **Dashed**. En **Theme defaults**, la mayoría de los elementos no tiene ningún borde. **None** quita un borde que dibuja tu tema. 2. El anillo **Border** del modelo de caja define el ancho de cada lado, de 0 a 50 px. Si lo dejas vacío, el navegador usa su propio ancho de unos 3 px. 3. **Border color** define el color. Si lo dejas vacío, el borde toma el color del texto. **Border radius** redondea las cuatro esquinas, de 0 a 100 px. También redondea el fondo y la sombra. En un **Image** redondea la imagen misma. Para un círculo, haz el elemento cuadrado. Luego pon **Border radius** en la mitad de su ancho en píxeles: 100 para un elemento de 200 px de ancho. Para algo más ancho, añade la clase **Circular (50% radius)** bajo **HTML classes**. En un **Image** esta clase redondea el marco alrededor de la imagen, no la imagen, así que usa **Border radius** allí. ## Niveles de sombra | Nivel | Sombra bajo el elemento | |---|---| | 0 | Ninguna de DXPR Builder; tu tema decide | | 1 | 2 px abajo, 7 px difuminado, negro 20 % | | 2 | 4 px abajo, 12 px difuminado, negro 30 % | | 3 | 5 px abajo, 25 px difuminado, negro 30 % | | 4 | 8 px abajo, 38 px difuminado, negro 30 % | | 5 | 12 px abajo, 57 px difuminado, negro 30 % | Estos son los niveles predeterminados. Cada nivel es un estilo compartido, no un valor guardado en tu página, así que un tema puede reajustar un nivel para todo el sitio. Para tu equipo de desarrollo del tema: los niveles son las variables CSS `--dxb-box-shadow-1` a `--dxb-box-shadow-5`. En el panel **Hover style**, **Drop shadow** define el nivel mientras el puntero está sobre el elemento. La sombra nueva aparece en 0.15 segundos. Un nivel más alto en hover hace que una tarjeta parezca elevada. **HTML classes** ofrece más formas: **Lifted drop shadow**, **Raised drop shadow**, **3D shadow** y **Curved horizontal drop shadow**. También tiene las de Bootstrap **Small shadow**, **Default shadow** y **Large shadow**. Usa una sombra por elemento. Las clases de sombra de Bootstrap superan el deslizador **Drop shadow**. ## Si no ves el borde, esquinas o sombra que definiste - **El borde no aparece.** **Border style** está en **Theme defaults** o **None**. Elige **Solid**, **Dotted** o **Dashed**. - **El borde es más grueso de lo que quieres.** No hay ancho definido, así que el navegador usa unos 3 px. Define los lados **Border** en el modelo de caja. - **El borde tiene el color equivocado.** Un **Border color** vacío toma el color del texto. Elige un **Border color**. - **Las esquinas siguen cuadradas.** Una clase como **No rounded corners (rounded-0)** bajo **HTML classes**, o una regla del tema con `!important`, gana. Quita el chip, o pregunta a tu webmaster sobre la regla del tema. - **Las esquinas redondean pero no aparece ningún círculo.** El deslizador se detiene en 100 px. Usa la clase **Circular (50% radius)**. - **Drop shadow no cambia nada.** Una clase de sombra de Bootstrap como **Large shadow** bajo **HTML classes** gana. Quita su chip. El nivel 1 también es tenue, así que prueba el nivel 3. - **La sombra no crece en hover.** Define **Drop shadow** en el panel **Hover style**, no en **Style**, y elige un nivel más alto que el de reposo. - **Solo cambió un lado.** El candado junto a **Padding** o **Border** estaba abierto. Ciérralo e introduce el valor de nuevo. - **La sombra de hover nunca se muestra en un teléfono.** Las pantallas táctiles no tienen puntero, así que un aspecto hover solo se muestra tras un toque. ## ¿Qué sigue? - [Espaciado](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado): da al contenido aire dentro del borde.