Bordas Arredondadas CSS: estilizando bordas em CSS3
Neste artigo iremos aprender a criar elementos com bordas arredondadas por meio de CSS3. Iremos ver como é possível atribuir diferentes valores para diferentes bordas.
Artigos HTML e CSS Bordas Arredondadas CSS3: Estilizando bordas
Olá Pessoal, neste tutorial iremos ver como arredondar os cantos das bordas por meio de CSS3 e fazer funcionar em todos os navegadores.
Antes do CSS3, para criarmos bordas arredondadas era preciso escrever bastante código CSS e usar diversas imagens, mas com a chegava do novo CSS esse trabalho ficou muito mais fácil, em apenas três linhas é possível fazer um Box com cantos arredondados aparecer em todos os principais navegadores e ainda poder definir o quanto arredondado ficará a borda.
Vamos à parte prática, que é o que interessa.
Conheça mais sobre o CSS
Primeiro criamos um documento HTML que será onde ficará o nosso Box, como mostra a Listagem 1.
<title>Bordas Arredondadas</title>
<!-- iremos criar nossa div onde ficará o box arredondado -->
Note que usamos o CSS para estilizar a div criada pelo HTML, nela colocamos largura e altura que desejamos e também colocamos uma propriedade nova, chamada border-radius. Com ela é possível arredondar todas as bordas sem precisar de usar imagens para fazer isso, como mostra a Listagem 2.
/*definimos a largura do box*/
/* definimos a altura do box */
/* definimos a cor de fundo do box */
/* definimos o quão arredondado irá ficar nosso box */
Listagem 2. Propriedade border-radius
Como podemos ver na Figura 1, o nosso Box terá 10px de bordas arredondadas, isso quer dizer que todas as quatro bordas terá o valor de 10px.
Figura 1. Bordas com 10px de arredondamento
Assim como as propriedades margin, padding e border, é possível definir valores diferentes para cada canto. Na Listagem 3 mostraremos alguns exemplos e como deverá ficar exibido após:
Listagem 3. border-radius: 10px 20px;
O exemplo anterior ficará da mesma forma que apresentado na Figura 2.
Figura 2. border-radius: 10px 20px 30px;
Listagem 4. border-radius: 10px 20px 30px;
O exemplo da Listagem 4 ficará como na Figura 3.
Figura 3. border-radius: 10px 20px 30px;
Listagem 5. border-radius: 10px 20px 30px 40px;
O exemplo da Listagem 5 ficará como na Figura 4.
Figura 4. border-radius: 10px 20px 30px 40px;
Caso você queira arredondar os cantos separadamente, também é possível. Abaixo as opções de alteração separadamente e você pode testar e ver quais são os resultados.
border-radius-topleft para o canto superior esquerdo;
border-radius-topright para o canto superior direito;
border-radius-bottomright para o canto inferior direito;
border-radius-bottomleft para o canto inferior esquerdo.
Exibir no Firefox
Para exibir no Firefox é praticamente a mesma coisa, como mostra a Listagem 6: a única diferença é que usamos o prefixo "-moz-" antes de "border-radius", ficando "-moz-border-radius: X px;
/* Declaração para aparecer no Firefox */
Listagem 6. Exibindo no Firefox também
Assim como o Firefox, os outros navegadores, como Chrome, Safari, Opera, IE precisam de um prefixo para funcionarem também, para isso é usado o "-webkit-" antes de "border-radius", ficando "-webkit-border-radius", como mostra a Listagem 7.
/* Para exibir nos outros navegadores como Chrome, safari, opera*/
Listagem 7. : Exibindo em todos os navegadores
Agora sabemos como arredondas cada canto de qualquer elemento HTML por meio de CSS3, de maneira muito mais fácil e mais leve do que com CSS. Um abraço e até o próximo artigo.