Borda CSS é uma propriedade chave usada para caracterizar e estilizar as bordas em torno dos componentes HTML. As bordas desempenham um papel vital na composição do site, ajudando a criar separação, ênfase e apelo elegante. Em CSS, você pode utilizar algumas propriedades relacionadas às bordas para controlar o estilo, variedade, tamanho e formato dessas bordas. Neste artigo, investigaremos essas propriedades de borda CSS e como realmente utilizá-las.
Propriedades de borda CSS
As propriedades de borda CSS são utilizadas para determinar o estilo, variedade, largura e fluxo e refluxo das bordas de um componente. Essas propriedades incluem:
- estilo de borda
- Cor da borda
- largura da borda
- raio da fronteira
1) Estilo de borda CSS
A propriedade Estilo de borda é usada para especificar o tipo de borda que você deseja exibir na página web.
Existem alguns valores de estilo de borda que são usados com a propriedade border-style para definir uma borda.
| Valor | Descrição |
|---|---|
| nenhum | Não define nenhuma fronteira. |
| pontilhado | É usado para definir uma borda pontilhada. |
| tracejadas | É usado para definir uma borda tracejada. |
| sólido | É usado para definir uma borda sólida. |
| dobro | Ele define duas bordas com o mesmo valor de largura de borda. |
| sulco | Ele define uma borda ranhurada 3D. o efeito é gerado de acordo com o valor da cor da borda. |
| cume | Ele define uma borda com sulcos 3D. o efeito é gerado de acordo com o valor da cor da borda. |
| inserir | Ele define uma borda inserida em 3D. o efeito é gerado de acordo com o valor da cor da borda. |
| início | Ele define uma borda inicial 3D. o efeito é gerado de acordo com o valor da cor da borda. |
Exemplo:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Saída:
2) Largura da borda CSS
A propriedade border-width é usada para definir a largura da borda. Está definido em pixels. Você também pode usar um dos três valores predefinidos, fino, médio ou grosso para definir a largura da borda.
Nota: A propriedade border-width não é utilizada sozinha. Ele é constantemente utilizado com outras propriedades de borda, como a propriedade 'estilo de borda', para definir a borda primeiro de qualquer outra forma que não funcione.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Saída:
3) Cor da borda CSS
Existem três estratégias para definir a cor da borda.
- Nome: Determina o nome da cor. Por exemplo: 'vermelho'.
- RGB: Determina o valor RGB da cor. Por exemplo: 'rgb(255,0,0)'.
- Hex: Determina o valor hexadecimal da cor. Por exemplo: '#ff0000'.
Nota: A propriedade border-color não é utilizada sozinha. Ele é constantemente utilizado com outras propriedades de borda, como a propriedade 'estilo de borda', para definir a borda primeiro de qualquer outra forma que não funcione.
Exemplo:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Saída:
