Bordas arredondadas em CSS3 - Exemplos

05/08/2016

0

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 =)
Joel Rodrigues

Joel Rodrigues

Responder

Post mais votado

05/08/2016

Para facilitar a criação de elementos circulares, podemos criar uma classe com border-radius 100%, da seguinte forma:

.circular {
  border-radius: 100%
}


A partir daí, é só usar o .circular nos elementos desejados.

Joel Rodrigues

Joel Rodrigues
Responder

Mais Posts

02/02/2022

Arthur Bastos

Poderia postar como seria a parte do HTML para a criação dessa classe por favor?
Obrigado!
Responder

15/02/2022

Josué Máximo

Poderia postar como seria a parte do HTML para a criação dessa classe por favor?
Obrigado!


Basta adicionar o atributo class na tag do seu HTML Arthur, exemplo:
<div class="circular"></div>
Responder

07/03/2022

Ivamar Vasconcelos

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%;
}
Responder

08/03/2022

Lukas Almeida

HTML
style

div{
width:200px;
height:200px;
border: 1px solid black;
}
.circular{
border-radius:20%;
}



<div class="circular"></div>

Responder

18/04/2022

Paulo Pacheco

<div class="modelo"></>


div {
width: 250px;
height: 250px
border: 6px dotted #000
}

.modelo {
border-radius: 0px 25px
}
Responder

08/05/2022

Reginaldo Assunção

<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>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar