Como fazer bordas interiores e exteriores com CSS

Escrito por sara williams | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer bordas interiores e exteriores com CSS
Um arquivo CSS define os estilos de uma página web (Comstock/Comstock/Getty Images)

Todo elemento em uma página Web pode aparecer com uma borda se você codificá-la com CSS. As bordas podem ter a cor e espessura que você quiser e é possível até mesmo curvá-las. As bordas duplas dão um pouco mais de trabalho, pois cada elemento só pode ter uma borda. Embora você possa envolvê-la com um "div" extra no código HTML, uma forma muito mais elegante e agradável de aplicar uma borda interior e exterior é usar pseudoelementos. Em CSS, os pseudoelementos são criados a partir de regras de estilo prefixadas com ":after" ou ":before".

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o seu arquivo HTML em um editor (pode ser o Bloco de Notas, mas um editor de código com linhas numeradas é mais conveniente) e procure a etiqueta "<div>" que envolve o conteúdo que necessita de bordas. Você pode também adicionar as etiquetas se elas não estiverem ainda no código e dar-lhes um nome de ID único:

    <div id=”minhas_bordas”> Conteúdo... </div>

  2. 2

    Abra o arquivo da folha de estilos para a sua página web ou coloque o código CSS entre as etiquetas "<style>" no cabeçalho (a seção "head") do seu arquivo HTML:

    <style type=”text/css”> </style>

  3. 3

    Escreva uma regra de estilo para o div e adicione uma borda a ele. Ela será a borda interior:

    minhas_Bordas {

    border: 3px solid red; }

    Altere o valor "3px" pela espessura que você quiser para a borda e troque "red" por outro nome de cor ou código hexadecimal a sua escolha.

  4. 4

    Crie um pseudoelemento para fazer a borda exterior:

    minhas_bordas:after {

    content: ''; }

    Essa regra de estilo criará um novo div que não estará no HTML, mas o navegador o tratará como se estivesse.

  5. 5

    Estilize o pseudoelemento para que apareça por trás do div:

    minhas_bordas:after {

    position: absolute; z-index: -10; }

  6. 6

    Ajuste o tamanho do pseudoelemento para que caiba na borda interior e mova-o:

    minhas_bordas:after {

    position: absolute; z-index: -10; padding: 3px; top: -3px; left: -3px; }

    O valor do "padding" (espaçamento) aqui é igual à espessura da borda interior e isso alterará o tamanho do div. Mover o pseudoelemento 3 pixels para cima da parte superior e 3 pixels para a direita o centralizará sobre a borda interior.

  7. 7

    Estilize a borda do pseudoelemento para criar sua borda exterior:

    minhas_bordas:after {

    position: absolute; z-index: -10; padding: 3px; top: -3px; left: -3px; border: 10px solid blue; }

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível