Cantos arredondados CSS
Cantos arredondados CSS
Com a propriedade CSS border-radius
, você pode dar "cantos arredondados" a qualquer elemento.
Propriedade CSS border-radius
A propriedade CSS
border-radius
define o raio dos cantos de um elemento.
Dica: Esta propriedade permite adicionar cantos arredondados aos elementos!
Aqui estão três exemplos:
1. Cantos arredondados para um elemento com uma cor de fundo especificada:
Cantos arredondados!
2. Cantos arredondados para um elemento com borda:
Cantos arredondados!
3. Cantos arredondados para um elemento com imagem de fundo:
Cantos arredondados!
Aqui está o código:
Exemplo
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
}
Dica: A border-radius
propriedade é, na verdade, uma propriedade abreviada para as
propriedades border-top-left-radius
, border-top-right-radius
e .border-bottom-right-radius
border-bottom-left-radius
CSS border-radius - Especificar cada canto
A border-radius
propriedade pode ter de um a quatro valores. Aqui estão as regras:
Quatro valores - raio da borda: 15px 50px 30px 5px; (o primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica ao canto superior direito, o terceiro valor se aplica ao canto inferior direito e o quarto valor se aplica ao canto inferior esquerdo):
Três valores - border-radius: 15px 50px 30px; (o primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica aos cantos superior direito e inferior esquerdo e o terceiro valor se aplica ao canto inferior direito):
Dois valores - border-radius: 15px 50px; (o primeiro valor se aplica aos cantos superior esquerdo e inferior direito, e o segundo valor se aplica aos cantos superior direito e inferior esquerdo):
Um valor - raio da borda: 15px; (o valor se aplica a todos os quatro cantos, que são arredondados igualmente:
Aqui está o código:
Exemplo
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Você também pode criar cantos elípticos:
Exemplo
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Propriedades de cantos arredondados CSS
Property | Description |
---|---|
border-radius | A shorthand property for setting all the four border-*-*-radius properties |
border-top-left-radius | Defines the shape of the border of the top-left corner |
border-top-right-radius | Defines the shape of the border of the top-right corner |
border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |