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

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

Aceitar