8.1 Propriedade border
Bordas são um aspecto importante do web design. Elas permitem destacar elementos e melhorar a percepção visual da página. CSS oferece várias propriedades para criar e estilizar bordas. Vamos dar uma olhada nas principais propriedades de bordas, incluindo a escrita compacta e completa, assim como propriedades para definir a largura, estilo, cor e cantos arredondados das bordas.
Parâmetros principais
Os parâmetros principais da borda podem ser definidos usando propriedades separadas: border-width, border-style e border-color.
Sintaxe:
element {
border-width: width;
border-style: style;
border-color: color;
}
Exemplo de uso:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Escrita compacta
A propriedade border permite definir todos os parâmetros principais da borda (largura, estilo e cor) em uma única linha.
Sintaxe:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Escrita compacta</div>
<div class="border-full">Escrita completa</div>
</body>
8.2 Largura da borda: border-width
A propriedade border-width define a largura da borda. Os valores podem ser definidos em pixels (px), pontos (pt), porcentagens (%) ou palavras-chave (thin, medium, thick).
Sintaxe:
element {
border-width: width;
}
Exemplo:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Borda fina</div>
<div class="border-medium">Borda média</div>
<div class="border-thick">Borda grossa</div>
<div class="border-custom">Borda com 5px de largura</div>
</body>
8.3 Estilo da borda: border-style
Descrição:
A propriedade border-style define o estilo da borda. As opções de estilo incluem:
none: sem bordasolid: linha contínuadotted: linha pontilhadadashed: linha tracejadadouble: linha duplagroove: borda em forma de sulcoridge: borda em forma de cumeinset: borda em forma de encaixeoutset: borda em forma de relevo
Sintaxe:
element {
border-style: style;
}
Exemplo:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Sem borda</div>
<div class="border-solid">Linha contínua</div>
<div class="border-dotted">Linha pontilhada</div>
<div class="border-dashed">Linha tracejada</div>
<div class="border-double">Linha dupla</div>
<div class="border-groove">Sulco</div>
<div class="border-ridge">Cume</div>
<div class="border-inset">Encaixe</div>
<div class="border-outset">Relevo</div>
</body>
8.4 Cor da borda: border-color
A propriedade border-color define a cor da borda. A cor pode ser especificada em vários formatos: nomes de cores, códigos hexadecimais, RGB, RGBA, HSL, HSLA.
Sintaxe:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Borda vermelha</div>
<div class="border-blue">Borda azul</div>
<div class="border-green">Borda verde</div>
<div class="border-rgba">Borda vermelha semitransparente</div>
</body>
8.5 Cantos arredondados com border-radius
A propriedade border-radius permite arredondar os cantos dos elementos, criando bordas arredondadas. Ela pode ser aplicada a todos os quatro cantos ao mesmo tempo ou a cada canto individualmente.
Sintaxe:
element {
border-radius: radius;
}
Valores:
- Valor único: por exemplo,
border-radius: 10px;— define o mesmo raio de arredondamento para todos os cantos - Dois valores: por exemplo,
border-radius: 10px 20px;— o primeiro valor para os cantos superiores esquerdo e inferior direito, o segundo para os cantos superiores direito e inferior esquerdo - Quatro valores: por exemplo,
border-radius: 10px 20px 30px 40px;— define os raios para os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo, respectivamente - Valores mistos: raios podem ser definidos em porcentagens, permitindo adaptar o arredondamento ao tamanho do elemento
Exemplo:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Arredondamento de todos os cantos</div>
<div class="radius-top">Arredondamento dos cantos superiores</div>
<div class="radius-bottom">Arredondamento dos cantos inferiores</div>
<div class="radius-mixed">Arredondamento misto dos cantos</div>
</body>
.radius-all: aplica o mesmo raio de arredondamento (15px) a todos os cantos.radius-top: aplica arredondamento (20px) apenas aos cantos superiores.radius-bottom: aplica arredondamento (25px) apenas aos cantos inferiores.radius-mixed: aplica valores diferentes de raio a cada canto
GO TO FULL VERSION