Bordas arredondadas em CSS3 - Exemplos
Fala, pessoal. Tudo bem?
No artigo que publiquei recentemente expliquei como utilizar a propriedade border-radius das CSS3 para criar bordas arredondadas: CSS3: Border-radius.
Abri esse tópico para que possamos compartilhar outros exemplos de uso desse recurso, com base nas experiências de cada um.
Tem uma dica, comentário, exemplo? Poste aqui =)
No artigo que publiquei recentemente expliquei como utilizar a propriedade border-radius das CSS3 para criar bordas arredondadas: CSS3: Border-radius.
Abri esse tópico para que possamos compartilhar outros exemplos de uso desse recurso, com base nas experiências de cada um.
Tem uma dica, comentário, exemplo? Poste aqui =)

Joel Rodrigues
Curtidas 17
Melhor post

Joel Rodrigues
05/08/2016
Para facilitar a criação de elementos circulares, podemos criar uma classe com border-radius 100%, da seguinte forma:
A partir daí, é só usar o .circular nos elementos desejados.
.circular { border-radius: 100% }
A partir daí, é só usar o .circular nos elementos desejados.
GOSTEI 36
Mais Respostas

Calebe Menezes
05/08/2016
Tem alguma diferença de se usar isso em pixels?
GOSTEI 0

Larissa Aguiar
05/08/2016
Curti o exemplo :)
GOSTEI 0

Calebe Menezes
05/08/2016
fneiowgbiouewafuowehoipfw
GOSTEI 0

Joel Rodrigues
05/08/2016
Fala, Calebe. Não tem diferença não, basta adequar os valores à sua necessidade. Nessa classe utilizei o 100% para que ela seja genérica e sirva para qualquer elemento, independente do tamanho. Caso contrário, precisaríamos informar o valor em pixels referente à largura/altura de cada item no qual desejássemos aplicar o efeito.
Abraço.
Abraço.
GOSTEI 0

Arthur Bastos
05/08/2016
Poderia postar como seria a parte do HTML para a criação dessa classe por favor?
Obrigado!
Obrigado!
GOSTEI 1

Josué Máximo
05/08/2016
Poderia postar como seria a parte do HTML para a criação dessa classe por favor?
Obrigado!
Obrigado!
Basta adicionar o atributo class na tag do seu HTML Arthur, exemplo:
<div class="circular"></div>
GOSTEI 2

Ivamar Vasconcelos
05/08/2016
Muito bom Joel, afim de esclarecer o que está sendo dito é que podemos criar elementos circulares através do border-radius na seguinte forma, ainda no HTML escolhemos o elemento que vamos manipular por exemplo "div" e atribuímos a "class", em seguida vamos ao CSS e criamos nosso border-radius dentro do elemento "class" ficando da seguinte forma:
HTML
<div class="circular"> </div>
CSS
.circular {
border-radius: 100%;
}
HTML
<div class="circular"> </div>
CSS
.circular {
border-radius: 100%;
}
GOSTEI 2

Lukas Almeida
05/08/2016
HTML
style
style
div{ width:200px; height:200px; border: 1px solid black; } .circular{ border-radius:20%; }
<div class="circular"></div>
GOSTEI 2

Paulo Pacheco
05/08/2016
<div class="modelo"></>
div {
width: 250px;
height: 250px
border: 6px dotted #000
}
.modelo {
border-radius: 0px 25px
}
div {
width: 250px;
height: 250px
border: 6px dotted #000
}
.modelo {
border-radius: 0px 25px
}
GOSTEI 1

Reginaldo Assunção
05/08/2016
<head>
<title>Trabalhando com Bordas em CSS3</title>
<head>
<style>
.test {
width: 220px;
height: 150px;
border: thin dashed blueviolet;
background-color: aquamarine;
border-radius: 10px 40px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
<title>Trabalhando com Bordas em CSS3</title>
<head>
<style>
.test {
width: 220px;
height: 150px;
border: thin dashed blueviolet;
background-color: aquamarine;
border-radius: 10px 40px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
GOSTEI 0