🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS: Adicionar linha de borda pontilhada com border-style: dotted

📝 Uso

Este template demonstra como usar a propriedade border-style: dotted no CSS para criar uma linha de borda pontilhada.

📘 Explicação

O código CSS acima utiliza a propriedade border-style: dotted para adicionar uma linha pontilhada abaixo do elemento h1. Você pode ajustar a cor e a espessura conforme necessário.

🔹 Código Parcial

Esta caixa tem uma linha de borda pontilhada.

<div class="demo-area">
  <p>Esta caixa tem uma linha de borda pontilhada.</p>
</div>

<style>
  .demo-area {
    margin: 20px 0;
    padding: 10px;
    border: 2px dotted #333;
    text-align: center;
    background-color: #f0f0f0;
  }
</style>

💻 Código HTML Completo

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adicionar linha de borda pontilhada com border-style: dotted</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      margin: 20px 0;
      padding: 10px;
      border: 2px dotted #333;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>Esta caixa tem uma linha de borda pontilhada.</p>
  </div>
</body>
</html>

💻 Código Completo Funcional

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adicionar linha de borda pontilhada com border-style: dotted</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      margin: 20px 0;
      padding: 10px;
      border: 2px dotted #333;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>Esta caixa tem uma linha de borda pontilhada.</p>
  </div>
</body>
</html>
Copiado!

✏️ Técnicas práticas para o uso de bordas pontilhadas

O uso de border-style: dotted é uma maneira eficaz de adicionar um toque visual leve ao design. Diferente da borda sólida, a borda pontilhada oferece um efeito visual distinto que pode ser usado para separar conteúdos ou como elemento decorativo.

🎨 Variações de design

Além do preto básico (#333), é possível ajustar a cor da borda conforme o tema do site. Por exemplo, usar #007acc (azul) ou #e74c3c (vermelho) para dar destaque, ou #999 para um efeito mais discreto. Alterar o border-width também permite modificar o tamanho dos pontos e criar diferentes estilos.

📐 Exemplos de uso no layout

As bordas pontilhadas são especialmente eficazes nas seguintes situações:
- Linhas divisórias entre seções
- Delimitação de textos explicativos em formulários
- Estilo de cupons ou ingressos
- Caixas para avisos ou termos legais

⚠️ Cuidados ao utilizar

As bordas pontilhadas têm menor visibilidade do que as sólidas, portanto não são ideais para destacar informações importantes. Além disso, em impressões, linhas muito finas podem não ser exibidas corretamente. Por isso, recomenda-se usar border-style: solid no CSS para impressão.

As bordas pontilhadas funcionam bem como elementos decorativos, mas seu uso excessivo pode gerar confusão visual. É essencial manter consistência no uso em todo o site e aplicá-las apenas para propósitos específicos.

Modelos Relacionados