CSS Border: estilizando com bordas seus elementos CSS
![CSS Border: estilizando com bordas seus elementos CSS](assets/css-border-estilizando-bordas-elementos-css/css-border-estilizando-bordas-elementos-css.png)
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.
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
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.](assets/css-border-estilizando-bordas-elementos-css/imagem1.png)
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.](assets/css-border-estilizando-bordas-elementos-css/imagem2.png)
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”.](assets/css-border-estilizando-bordas-elementos-css/imagem3.png)
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.](assets/css-border-estilizando-bordas-elementos-css/imagem4.png)
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”.](assets/css-border-estilizando-bordas-elementos-css/imagem5.png)
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.](assets/css-border-estilizando-bordas-elementos-css/imagem6.gif)
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.