--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/bordos-e-sombras' title: 'Adicione bordos, cantos arredondados e sombras | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:13:27+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Emoldure um cartão, arredonde os cantos de uma fotografia ou levante uma caixa da página com uma sombra. Define tudo isto no painel Style do elemento, e pode mudá-lo ao pairar o cursor no painel Hover style. Utilize-o para destacar um cartão. Para a mesma moldura em toda uma série de cartões, uma classe partilhada mantém-nos iguais. O vídeo segue a receita abaixo: transforma um bloco de texto num cartão com bordo, cantos arredondados e uma sombra que se aprofunda ao pairar o cursor. 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: 'Adicione bordos, cantos arredondados e sombras' description: |- Emoldure um cartão, arredonde os cantos de uma fotografia ou levante uma caixa da página com uma sombra. Define tudo isto no painel Style do elemento, e pode mudá-lo ao pairar o cursor no painel Hover style. Utilize-o para destacar um cartão. Para a mesma moldura em toda uma série de cartões, uma classe partilhada mantém-nos iguais. O vídeo segue a receita abaixo: transforma um bloco de texto num cartão com bordo, cantos arredondados e uma sombra que se aprofunda ao pairar o cursor. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:13:27+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/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/bordos-e-sombras' articleSection: 'Estilizar os elementos' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/bordos-e-sombras' description: |- Emoldure um cartão, arredonde os cantos de uma fotografia ou levante uma caixa da página com uma sombra. Define tudo isto no painel Style do elemento, e pode mudá-lo ao pairar o cursor no painel Hover style. Utilize-o para destacar um cartão. Para a mesma moldura em toda uma série de cartões, uma classe partilhada mantém-nos iguais. O vídeo segue a receita abaixo: transforma um bloco de texto num cartão com bordo, cantos arredondados e uma sombra que se aprofunda ao pairar o cursor. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) # Adicione bordos, cantos arredondados e sombras. Aprender DXPR BuilderCriar páginasEstilizar os elementos ## Neste guia Guias relacionados - [Adicione espaço dentro e à volta dos elementos](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento) Emoldure um cartão, arredonde os cantos de uma fotografia ou levante uma caixa da página com uma sombra. Define tudo isto no painel **Style** do elemento, e pode mudá-lo ao pairar o cursor no painel **Hover style**. Utilize-o para destacar um cartão. Para a mesma moldura em toda uma série de cartões, uma classe partilhada mantém-nos iguais. O vídeo segue a receita abaixo: transforma um bloco de texto num cartão com bordo, cantos arredondados e uma sombra que se aprofunda ao pairar o cursor. ## Antes de começar - Abra a página no DXPR Builder; apontar para um elemento mostra a barra de controlos com **More**. Novo no construtor? Veja [Crie a sua primeira página](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina). - **Save** no diálogo mantém uma alteração no editor. **Save** na barra de ferramentas do construtor por cima do conteúdo guarda a página e mostra "Saved field". - **Destaque uma coisa.** Um bordo ou uma sombra atrai o olhar para uma data importante, uma oferta ou uma citação. Pô-lo em tudo e deixa de funcionar. - **Mantenha uma série igual.** Para a mesma moldura em muitos cartões, guarde um cartão como modelo ou use uma classe partilhada. Veja [HTML ID and classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado). - **Deixe o tema afinar as sombras.** Os cinco níveis de **Drop shadow** são definidos uma vez para todo o site. O seu tema pode reestilizar um nível, e cada elemento que o usa acompanha. ## Receita: um cartão em destaque Obtém uma caixa suave com um bordo fino na cor da sua marca. Tem cantos arredondados e uma sombra que cresce ao pairar o cursor. 1. Paire o cursor sobre o elemento **Text**, clique em **More** e depois em **Settings**. 2. Abra o painel **Style**. O modelo de caixa fica no topo. Os cadeados começam abertos; clique no cadeado junto a **Padding** para o fechar, para que os quatro lados se movam juntos. 3. Clique no lado superior de **Padding**, escreva 32 e prima Enter. Os quatro lados passam a dizer 32px. 4. Escolha uma cor clara de **Background**, como um cinzento pálido. 5. Defina **Border style** como **Solid**. 6. Feche o cadeado junto a **Border**, depois clique num dos lados, escreva 1 e prima Enter. 7. Escolha uma **Border color**, defina **Border radius** como 16 e **Drop shadow** como 3. 8. Abra o painel **Hover style** e defina **Drop shadow** como 5. 9. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. 10. Escolha **Preview** no menu de vista (o ícone de olho) e aponte para o cartão. A sombra aprofunda-se. ## O que vê O cartão tem um bordo fino na sua cor, cantos arredondados e uma sombra suave por baixo. Em **Preview**, a sombra aprofunda-se enquanto o ponteiro está sobre o cartão e volta ao normal quando sai. ## Como se constrói um bordo Um bordo precisa de três definições, e o painel espalha-as. Defina as três: 1. **Border style** escolhe a linha: **Solid**, **Dotted** ou **Dashed**. Em **Theme defaults**, a maioria dos elementos não tem bordo. **None** remove um bordo que o seu tema desenha. 2. O anel **Border** do modelo de caixa define a largura de cada lado, de 0 a 50 px. Se o deixar vazio, o navegador usa a sua largura de cerca de 3 px. 3. **Border color** define a cor. Se a deixar vazia, o bordo fica com a cor do texto. **Border radius** arredonda os quatro cantos, de 0 a 100 px. Também arredonda o fundo e a sombra. Num **Image** arredonda a própria fotografia. Para um círculo, torne o elemento quadrado. Depois defina **Border radius** como metade da largura em píxeis: 100 para um elemento com 200 px de largura. Para algo mais largo, adicione a classe **Circular (50% radius)** em **HTML classes**. Num **Image** esta classe arredonda a moldura à volta da fotografia, não a fotografia, por isso use aí **Border radius**. ## Níveis de sombra | Nível | Sombra sob o elemento | |---|---| | 0 | Nenhuma do DXPR Builder; o seu tema decide | | 1 | 2 px para baixo, 7 px de desfoque, preto a 20% | | 2 | 4 px para baixo, 12 px de desfoque, preto a 30% | | 3 | 5 px para baixo, 25 px de desfoque, preto a 30% | | 4 | 8 px para baixo, 38 px de desfoque, preto a 30% | | 5 | 12 px para baixo, 57 px de desfoque, preto a 30% | Estes são os níveis predefinidos. Cada nível é um estilo partilhado, não um valor guardado na sua página, por isso um tema pode reafinar um nível para todo o site. Para o programador do seu tema: os níveis são as variáveis CSS `--dxb-box-shadow-1` a `--dxb-box-shadow-5`. No painel **Hover style**, **Drop shadow** define o nível enquanto o ponteiro está sobre o elemento. A nova sombra aparece gradualmente em 0,15 segundos. Um nível mais alto ao pairar o cursor faz um cartão parecer levantado. **HTML classes** oferece mais formas: **Lifted drop shadow**, **Raised drop shadow**, **3D shadow** e **Curved horizontal drop shadow**. Também tem as classes **Small shadow**, **Default shadow** e **Large shadow** do Bootstrap. Use uma sombra por elemento. As classes de sombra do Bootstrap vencem o cursor **Drop shadow**. ## Se não vir o bordo, os cantos ou a sombra que definiu - **O bordo não aparece.** **Border style** está em **Theme defaults** ou **None**. Escolha **Solid**, **Dotted** ou **Dashed**. - **O bordo está mais espesso do que quer.** Não há largura definida, por isso o navegador usa cerca de 3 px. Defina os lados de **Border** no modelo de caixa. - **O bordo tem a cor errada.** Uma **Border color** vazia fica com a cor do texto. Escolha uma **Border color**. - **Os cantos ficam quadrados.** Uma classe como **No rounded corners (rounded-0)** em **HTML classes**, ou uma regra do tema com `!important`, ganha. Remova a amostra ou pergunte ao seu webmaster sobre a regra do tema. - **Os cantos arredondam mas não aparece círculo.** O cursor para nos 100 px. Use a classe **Circular (50% radius)**. - **Drop shadow não muda nada.** Uma classe de sombra Bootstrap como **Large shadow** em **HTML classes** ganha. Remova a amostra. O nível 1 também é ténue, por isso experimente o nível 3 para testar. - **A sombra não cresce ao pairar o cursor.** Defina **Drop shadow** no painel **Hover style**, não em **Style**, e escolha um nível mais alto que o de repouso. - **Só um lado mudou.** O cadeado junto a **Padding** ou **Border** estava aberto. Feche-o e introduza o valor de novo. - **A sombra de hover nunca aparece no telemóvel.** Os ecrãs táteis não têm ponteiro, por isso um aspeto de hover só aparece depois de um toque. ## E a seguir? - [Adicione espaço dentro e à volta dos elementos](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento): dê espaço ao conteúdo dentro do bordo.