Bordas arredondadas em CSS3 - Exemplos
05/08/2016
0
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
Post mais votado
05/08/2016
.circular {
border-radius: 100%
}
A partir daí, é só usar o .circular nos elementos desejados.
Joel Rodrigues
Mais Posts
02/02/2022
Arthur Bastos
Obrigado!
15/02/2022
Josué Máximo
Obrigado!
Basta adicionar o atributo class na tag do seu HTML Arthur, exemplo:
<div class="circular"></div>
07/03/2022
Ivamar Vasconcelos
HTML
<div class="circular"> </div>
CSS
.circular {
border-radius: 100%;
}
08/03/2022
Lukas Almeida
style
div{
width:200px;
height:200px;
border: 1px solid black;
}
.circular{
border-radius:20%;
}
<div class="circular"></div>
18/04/2022
Paulo Pacheco
div {
width: 250px;
height: 250px
border: 6px dotted #000
}
.modelo {
border-radius: 0px 25px
}
08/05/2022
Reginaldo Assunção
<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>
Clique aqui para fazer login e interagir na Comunidade :)