Propriedade CSS border-radius
Exemplo
Adicione cantos arredondados a dois elementos <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A border-radiuspropriedade define o raio dos cantos do elemento.
Dica: Esta propriedade permite adicionar cantos arredondados aos elementos!
Esta 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:
| Valor padrão: | 0 |
|---|---|
| Herdado: | não |
| Animavel: | sim. Leia sobre animáveis |
| Versão: | CSS3 |
| Sintaxe JavaScript: | objeto .style.borderRadius="25px" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit- ou -moz- especificam a primeira versão que funcionou com um prefixo.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintaxe CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Nota: Os quatro valores para cada raio são fornecidos na ordem superior-esquerda, superior-direita, inferior-direita, inferior-esquerda. Se o canto inferior esquerdo for omitido, é o mesmo que o canto superior direito. Se o canto inferior direito for omitido, é o mesmo que o canto superior esquerdo. Se o canto superior direito for omitido, é o mesmo que o canto superior esquerdo.
Valores de propriedade
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Defina cantos arredondados para um elemento com uma cor de fundo:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Exemplo
Defina cantos arredondados para um elemento com uma borda:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Exemplo
Defina cantos arredondados para um elemento com uma imagem de fundo:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Exemplo
Observe também isso:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Páginas relacionadas
Tutorial CSS: Cantos arredondados CSS
Referência HTML DOM: propriedade borderRadius