Bordas em CSS
Como utilizar as propriedades CSS de largura e cor da borda e os valores de estilo de borda como dotted, dashed, solid, double, groove, ridge, inset, outset. Veja os exemplos.
Bordas em CSS
Neste capítulo, vamos falar sobre as bordas e como podemos aplicar-lhes estilos. Podemos atribuir à borda uma largura, um estilo e uma cor.
Exemplo da propriedade border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>Resultado
Largura da borda
A propriedade border-width define a largura de uma borda.
A largura pode ser especificada em pixels. Também pode ser especificada através de um dos três valores predefinidos: medium, thin ou thick.
Não pode utilizar a propriedade "border-width" sozinha; não irá funcionar. Utilize primeiro "border-style" para definir as bordas.
Exemplo da propriedade border-width:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>Cor da borda
A propriedade border-color é utilizada para definir a cor de uma borda. A cor pode ser definida por:
- name - especifica o nome de uma cor, como "red"
- RGB - especifica um valor RGB, como "rgb(255,0,0)"
- Hex - especifica um valor hexadecimal, como "#ff0000"
Não pode utilizar a propriedade "border-color" sozinha; não irá funcionar. Utilize primeiro "border-style" para definir as bordas.
Normalmente, escrevemos estas três propriedades em conjunto numa única linha.
Exemplo da propriedade border-color:
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>Pode experimentar outros exemplos com a nossa ferramenta CSS Maker.
Estilo da borda
A propriedade CSS border-style define o estilo dos quatro lados das bordas de um elemento. As bordas são colocadas por cima do fundo de um elemento. Pode ter de um a quatro valores, pelo que cada lado pode ter o seu próprio valor. O valor predefinido de border-style é none.
border-style tem os seguintes valores:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Alguns browsers não suportam alguns estilos. Normalmente, quando um estilo não é suportado, o browser desenha a borda como solid.
Bordas CSS para lados individuais
O CSS oferece propriedades que especificam cada borda (direita, esquerda, inferior e superior).
A propriedade border-style pode ter 4 valores, por exemplo, border-style: dotted solid double dashed; onde a borda superior é dotted, a inferior é double, a direita é solid e a esquerda é dashed.
A propriedade border-style pode ter 3 valores, por exemplo, border-style: dotted solid double; onde a borda superior é dotted, a inferior é double e as bordas direita e esquerda são solid.
A propriedade border-style pode ter 2 valores, por exemplo, border-style: dotted solid; onde as bordas direita e esquerda são solid e as superior e inferior são dotted. E, claro, esta propriedade pode ter apenas 1 valor, por exemplo, border-style: solid; onde todos os lados são solid.
Exemplo das propriedades da borda para lados individuais:
Exemplo da borda para lados individuais:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>A propriedade border como propriedade abreviada
A propriedade CSS border é uma propriedade abreviada (shorthand) para as seguintes propriedades individuais da borda:
- A propriedade CSS border-width, que define a largura dos quatro lados da borda de um elemento.
- A propriedade CSS border-style, que define o estilo dos quatro lados das bordas de um elemento.
- A propriedade CSS border-color, que define a cor dos quatro lados da borda de um elemento.
Exemplo da propriedade abreviada border:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>Bordas arredondadas
Utilizando a propriedade CSS border-radius, pode adicionar bordas arredondadas a um elemento.
Exemplo da propriedade border-radius:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>A diferença entre bordas e outlines
Os outlines e as bordas costumam gerar confusão porque são muito semelhantes. No entanto, existem diferenças entre os dois:
- Os outlines são desenhados fora do conteúdo de um elemento, pelo que não ocupam espaço.
- Os outlines costumam ser retangulares, embora não tenham de o ser.