Propriedade CSS border
A border é uma propriedade CSS abreviada que define valores para os quatro lados de um elemento. Veja exemplos e experimente você mesmo.
A propriedade CSS border é uma abreviação que define border-width, border-style e border-color para todos os quatro lados de um elemento em uma única declaração. Valores negativos de largura não são permitidos.
Esta página abrange a sintaxe abreviada, os valores aceitos, como dar a cada lado uma aparência diferente e as propriedades relacionadas que você usa quando a abreviação não é suficiente.
Use o atalho border quando quiser a mesma borda em todos os quatro lados:
/* shorthand — all four sides identical */
border: 2px solid #1c87c9;
/* equivalent longhand */
border-width: 2px;
border-style: solid;
border-color: #1c87c9;Quando os lados devem ser diferentes, defina as propriedades longhands individualmente — cada uma delas aceita até quatro valores na ordem superior–direito–inferior–esquerdo. Você também pode selecionar um lado com border-top, border-right, border-bottom e border-left.
O valor de border-style é o que faz a borda aparecer. Se você definir apenas uma largura e uma cor, mas deixar o estilo no padrão none, a borda permanece invisível.
| Valor Inicial | medium none currentColor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. Largura, cor e estilo da borda são animáveis. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.border = "5px solid green"; |
Sintaxe
Sintaxe da propriedade CSS border
border: border-width border-style border-color | initial | inherit;Exemplo da propriedade border:
Exemplo da propriedade CSS border com o valor solid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "thick solid green".</p>
</body>
</html>Resultado
Veja outro exemplo em que o estilo da borda é tracejado, a largura é definida como 3px e a cor da borda é azul.
Exemplo da propriedade border com o valor "dashed":
Exemplo da propriedade CSS border com o valor dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "3px dashed blue".</p>
</body>
</html>O atalho border sempre pinta todos os quatro lados da mesma forma. Para variar um lado, substitua uma das propriedades longhand depois dele. No próximo exemplo, uma única declaração border-color recebe três valores: o primeiro aplica-se ao topo, o segundo à direita e à esquerda, e o terceiro à parte inferior. O primeiro é aplicado à borda superior, o segundo à direita e à esquerda, e o terceiro à inferior.
Exemplo da propriedade border com 3 valores de border-color:
Exemplo da propriedade CSS border-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<div>Here 3 values are applied to the border-color property.</div>
</body>
</html>Exemplo da propriedade border-style:
Exemplo da propriedade CSS border com os valores solid, dotted e double
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p class="border1">A heading with a solid gray border.</p>
<p class="border2">A heading with a dotted blue border.</p>
<div>A div element with a thick double green border.</div>
</body>
</html>Cantos arredondados e propriedades relacionadas
O atalho border não controla o raio dos cantos. Para arredondar cantos, adicione a propriedade separada border-radius:
p {
border: 3px solid #1c87c9;
border-radius: 8px;
}Algumas propriedades relacionadas valem conhecer:
- border-radius — arredonda os cantos.
- outline — desenha uma linha fora da borda que não ocupa espaço no layout.
- border-collapse — mescla bordas de células adjacentes em tabelas em uma única linha.
Valores
O atalho aceita os três longhands de borda em qualquer ordem, além das palavras-chave globais.
| Valor | Descrição |
|---|---|
| border-width | Define a largura da borda. O valor padrão é "medium". |
| border-style | Define o estilo da borda. O valor padrão é "none". |
| border-color | Define a cor da borda. O valor padrão é a cor atual do elemento. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |