Gerador de Bordas Arredondadas em CSS

Porque não produzir bordas arredondadas em seus projetos CSS de forma p´ratica?

Então customize seus projetos de designer online de forma muito simplificada e completa.

Afinal, como funciona o Gerador de Bordas arredondadas?

No gerador abaixo, a princípio, insira um valor de arredondamento no campo em azul.

Logo após, automaticamente todos os cantos ficarão com os valores iguais por padrão.

Então, você poderá alterar os valores de cada canto da maneira que quiser.

Ademais, no centro estará o código CSS3 pronto para ser inserido no seu projeto.

Por fim, copie e cole no seu projeto!

Criando arredondamento de bordas

Criar bordas arredondadas em HTML antes da chegada do CSS3 era algo bem difícil, pois as bordas arredondadas eram feitas com o uso de várias imagens escalonadas. Assim sendo, um trabalhão e tanto.

Hoje, criar bordas arredondadas e customizadas ficou muito mais fácil, bastando sobretudo, apenas atribuir valores numéricos na propriedade CSS.

Para criar bordas arredondadas num elemento HTML devemos, portanto, atribuir um valor à propriedade CSS border-radius como nos exemplos abaixo:

01 - Linha 1: border-radius: valor;
02 - border-radius: valor1 valor 2;
03 - border-radius: valor1 valor 2 valor 3 valor 4
04 - border-top-left-radius: valor;
05 - border-top-right-radius: valor;
06 - border-bottom-left-radius: valor;
07 - border-bottom-right-radius: valor;

01: Primeiramente, o valor é aplicado a todos os vértices (cantos) do elemento, sendo aplicado o valor de arredondamento para todas as bordas;

02: o valor 1 é aplicado às extremidades superior esquerda e inferior direita, enquanto o valor 2 é aplicado aos cantos superior direito e inferior esquerdo;

03: o valor 1 corresponde ao ponto superior esquerdo, o valor 2 ao ponto superior direito, o valor 3 ao ponto inferior direito e, por fim, o valor 4 ao ponto inferior esquerdo;

Enfim, nas linhas 04 a 07: atribui-se os valores específicos de cada vértice.

Por exemplo, veja o código inserido e os vários exemplos de arredondamento de bordas em diversos elementos

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arredondamento de Bordas em CSS3 CSS3</title>
<style>
div {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-style: solid;
display: inline-block
}#elemento1 {
border-radius: 20px;
background-color: #0094FF;
}#elemento2 {
border-radius: 30px 10px;
background-color: green;
}#elemento3 {
border-radius: 5px 10px 20px 30px;
background-color: yellow;
}#elemento4 {
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="elemento1"></div>
<div id="elemento2"></div>
<div id="elemento3"></div>
<div id="elemento4"></div>
</body>
</html>

Elementos com arredondamento de bordas em CSS

Aliás, espero que tenha gostado desse gerador de bordas arredondadas.

Certamente esses websites também podem te interessar:

Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.