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