CSS Border: estilizando com bordas seus elementos CSS

No CSS, o espaço que um elemento ocupa é separado em margin, padding e border. Neste artigo, vamos aprender como podemos estilizar o seu border.

Ao inserir um elemento em um documento HTML, existem várias possibilidades de estilizar sua borda.

Você pode utilizar estilos que a propriedade já possui, além de poder também alterar sua cor, espessura e até mesmo seu formato.

Tudo isso utilizando apenas o poder do CSS. E caso queira aplicar na borda de algum elemento uma imagem interessante que você encontrou no Google, também é possível.

Border style CSS: o que é?

Antes de mais nada, é importante saber que a propriedade border CSS style — ou CSS border styles — é utilizada para definir o estilo da borda de um elemento HTML.

Cada estilo especifica um visual diferente para a borda, que veremos adiante. Ao escolher o estilo de borda mais adequado, você pode personalizar a apresentação visual do seu conteúdo.

Estilos de borda padrão da tag `border-style`

Esses são os estilos de borda padrão da tag border-styler:

Imagem com uma lista de caixas retangulares organizadas na vertical, com estilos de bordas padrão da tag `border-style`. Todos os elementos possuem bordas com cor azul, fundo branco e fonte de cor preta. No primeiro elemento contém a frase “Sou um elemento com borda dotted”, este elemento possui uma borda do tipo dotted. O segundo elemento contém a frase “Sou um elemento com borda double”, este elemento possui borda double. O terceiro elemento possui a frase “Sou um elemento com borda groove”, este elemento possui borda groove. O quarto elemento possui a frase “Sou um elemento com borda ridge”, este elemento possui borda ridge. O quinto elemento possui a frase “Sou um elemento com borda inset”, este elemento possui borda inset. O sexto elemento possui a frase “Sou um elemento com borda outset.”, este elemento possui borda outset. O sétimo elemento possui a frase “Sou um elemento com borda dashed”, este elemento possui borda dashed. O oitavo elemento possui a frase “Sou um elemento com borda solid”, este elemento possui borda solid.

Como utilizar a propriedade border?

Aqui estão algumas dicas de como usar a propriedade border:

Escreva menos código

Utilizando apenas a propriedade border, é possível aplicar três valores:

border: 30px solid blue;

O código acima é uma forma abreviada de escrever os mesmos valores abaixo:

border-width: 30px; // Estiliza a sua largura
border-style: solid; // Estiliza seu estilo
border-color:  blue; // Estiliza sua cor

Personalizando bordas: aplicando borda em apenas um lado do elemento

Caixa retangular com o fundo azul claro, e uma borda na parte superior com a cor azul. Dentro desta caixa contêm a frase “Sou um elemento com borda na parte superior", com cor preta.

Para realizar isso, devemos utilizar apenas a propriedade border-top. Veja a seguir o HTML da borda da imagem acima.

border-top: 30px solid blue;
background-color: rgb(150, 215, 255);

Para cada lado do elemento HTML, temos uma propriedade específica. Confira a seguir quais são:

border-top: Aplica borda na parte superior de um elemento.
border-left: Aplica borda no lado esquerdo de um elemento.
border-right: Aplica borda no lado direito de um elemento.
border-bottom: Aplica borda na parte inferior de um elemento.

Aplique imagens em uma borda

border-image:

Esta propriedade permite aplicar imagens na borda de um elemento.

Caixa retangular com fundo azul claro, e uma borda de imagem com traços desalinhados na cor preta, dentro da caixa tem a frase “Sou um elemento com efeito border-image”.

border: 30px solid transparent;
font-size: 40px;
background-color: rgb(150, 215, 255);
border-image: url("./132d0b11f96dcffaa700966900312a52.jpg") 150 round;

Ao utilizar a propriedade border-image, é necessário aplicar também a propriedade border antes, junto dos três valores que a acompanham: width, border-style e color.

Estas duas últimas propriedades (border-style e color) serão sobrepostas pela imagem, e apenas o width será aplicado.

Podemos também utilizar propriedades e atributos adicionais para estilizar bordas

border-radius:
Esta propriedade permite arredondar as bordas de um elemento.

Uma caixa retangular com fundo azul claro, e uma borda azul levemente arredondada nas quatro extremidades. Dentro da caixa tem a frase “Sou um elemento com border-radius” em cor preta.

border: 30px solid blue;
border-radius: 20px;

box-shadow:

Esta propriedade permite aplicar efeito de sombra em um elemento.

Uma caixa retangular com fundo azul claro, e uma borda azul, contendo em seu lado direito e inferior uma sombra na cor cinza, e no interior da caixa tem a frase “Sou um elemento com efeito box shadow”.

box-shadow: 10px 20px grey;

Outra propriedade é a hover. Com ela, é possível alterar ou adicionar estilos em um elemento quando passar o cursor do mouse por cima dele. Veja o gif abaixo com uma demonstração:

Imagem animada no formato GIF, contendo uma caixa retangular, com fundo azul claro, borda azul, em seu interior tem a frase “Sou um elemento com efeito hover” com fonte na cor preta, ao lado direito da caixa há um cursor de mouse. O cursor do mouse é arrastado para o interior da caixa, e em seguida a cor da fonte é alterada para branco, a cor de fundo altera para azul, e a cor da borda altera para azul claro.

Para utilizar o hover, você pode seguir o código abaixo. Perceba que utilizamos a propriedade transition. Ela serve para aplicar um tempo de transição na mudança de estilo.

elemento-referenciado {
    border: 30px solid blue;
    background-color: rgb(150, 215, 255);
transition: 1s; //determina o tempo de transição para volta do estado normal font-size: 40px;
    cursor: pointer;
}

elemento-referenciado:hover { //estilos que são adicionados ao passar o cursor no elemento
border: 30px solid blue;
background-color: rgb(150, 215, 255);
transition: 1s;  //determina o tempo de transição para aplicação dos estilos
}

Neste artigo, abordamos diferentes maneiras possíveis de estilizar a borda de um elemento. Agora, você é capaz de criar diversos tipos de bordas para o seu projeto.

Caso queira aprender mais sobre HTML, CSS e JavaScript, recomendo a Formação HTML e CSS da Alura, na qual você vai desenvolver diferentes projetos com design moderno e conteúdo atualizado.