CSSCursos WebHTMLTutoriais

Criando bordas CSS

A borda CSS e suas propriedades servem para definir e dar estilo as bordas dos elementos.

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


Wendell Rodrigues

Administrador e editor do site TecForest , estudante de sistemas de informação pela Estácio de Sá, apaixonado por tecnologia e inovação.

Artigos relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado.

Verifique também
Fechar
Botão Voltar ao topo