Propriedade CSS border-bottom-right-radius
CSS border-bottom-right-radius arredonda o canto inferior direito de um elemento. Veja sintaxe, valores e exemplos práticos.
A propriedade CSS border-bottom-right-radius arredonda apenas o canto inferior direito da caixa de borda de um elemento. É uma das quatro propriedades longhands — juntamente com border-top-left-radius, border-top-right-radius e border-bottom-left-radius — que a propriedade abreviada border-radius agrupa. Use o longhand quando quiser arredondar apenas um canto e deixar os demais em ângulo reto. Faz parte das propriedades CSS3.
Como funciona
O canto é desenhado como um quarto de uma elipse definida por um raio horizontal e um raio vertical:
- Um valor define ambos os raios, produzindo um canto perfeitamente circular (simétrico).
- Dois valores definem o raio horizontal primeiro e o raio vertical segundo, produzindo um canto elíptico.
- Percentagens são calculadas em relação à caixa do elemento: o raio horizontal é uma percentagem da largura, e o raio vertical uma percentagem da altura.
Se nenhum valor for definido, o raio é 0, resultando em um canto quadrado e reto. Uma cor de fundo ou imagem é recortada no canto arredondado; você pode alterar onde o recorte ocorre com a propriedade background-clip.
Alguns pontos importantes a ter em mente:
- Valores negativos são inválidos — o canto permanece em
0. - A propriedade é animável, portanto os cantos podem mudar suavemente em
:hoverou por meio de keyframes. - O suporte nos navegadores é universal nos navegadores modernos e em todas as versões do Internet Explorer a partir do IE9.
border-bottom-right-radius é um longhand. Se a propriedade abreviada border-radius for declarada depois dela na mesma regra, a abreviada redefine todos os quatro cantos e substitui este valor. Organize suas declarações de acordo.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdada | Não. |
| Animável | Sim. O raio do canto inferior direito da borda é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.borderBottomRightRadius = "15px"; |
Sintaxe
Propriedade CSS border-bottom-right-radius
border-bottom-right-radius: length | % | initial | inherit;Exemplo da propriedade border-bottom-right-radius:
Exemplo da propriedade CSS border-bottom-right-radius com um valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Resultado
Exemplo da propriedade border-bottom-right-radius com dois valores:
Exemplo da propriedade CSS border-bottom-right-radius com dois valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #eee;
border: 4px solid #666;
border-bottom-right-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Exemplo da propriedade border-bottom-right-radius com o valor "percentagem":
Exemplo da propriedade CSS border-bottom-right-radius com um valor em percentagem
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-bottom-right-radius: 30% 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| length | Define o formato do canto inferior direito em "px". | Experimente » |
| % | Define o formato do canto inferior direito em percentagem. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. |
Propriedades relacionadas
- border-radius — a propriedade abreviada que define todos os quatro cantos de uma vez.
- border-top-left-radius, border-top-right-radius, border-bottom-left-radius — os outros três longhands de canto.
- background-clip — controla como um fundo é recortado em cantos arredondados.