A borda CSS e suas propriedades servem para definir e dar estilo as bordas dos elementos.
As propriedades de borda são:
1- Borda
2- Estilo da Borda
3- Largura da Borda
4- Cor da Borda
1- Borda
A propriedade da borda CSS é usada para definir a borda como um elemento.
div {border:1px solid blue;}
2- Estilo da Borda
A propriedade de estilo de borda CSS é usada para definir o estilo nas bordas de um elemento
div{border-style:dotted solid double dashed;}
3- Largura da Borda
A propriedade de largura de borda do CSS é usada para definir a largura das bordas de um elemento.
div{border-width:10px;}
4- Cor da Borda
A propriedade de cor da borda do CSS é usada para definir a cor das bordas de um elemento.
div{border-color:red;}
Border Collapse
A propriedade Border Collapse (Colapso das bordas) do CSS é usada para definir se as bordas da tabela são separadas ou reduzidas em uma única borda.
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; }
table, td, th {border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
</tr>
<tr>
<td>Jose</td>
<td>Oliveira</td>
</tr>
<tr>
<td>Pedro</td>
<td>Rodrigues</td>
</tr>
</table>
</body>
</html>
Nome | Sobrenome |
Jose | Oliveira |
Pedro | Rodrigues |
Todas as propriedades de borda do CSS
border: define todas as propriedades da borda
border-top: define todas as propriedades da borda superior
border-left: define todas as propriedades da borda esquerda
border-bottom: define todas as propriedades da borda inferior
border-right: define todas as propriedades da borda direita
border-color: define a cor das quatro bordas
border-top-color: define a cor da borda superior
border-left-color: define a cor da borda esquerda
border-bottom-color: define a cor da borda inferior
border-right-color: define a cor da borda direita
border-style: define o estilo dos quatro limites
border-top-style: define o estilo da borda superior
border-left-style: define o estilo da borda esquerda
border-right-style: define o estilo da borda direita
border-bottom-style: define o estilo da borda inferior
border-width: Define a largura dos quatro limites
border-top-width: Define a largura da borda superior
border-left-width: define a largura da borda esquerda
border-bottom-width: define a largura da borda inferior
border-right-width: define a largura da borda direita