Propriedade CSS border-top-right-radius
A propriedade CSS border-top-right-radius arredonda o canto superior direito de um elemento. Aprenda a sintaxe, uso com um ou dois valores e percentagens.
A propriedade CSS border-top-right-radius arredonda o canto superior direito da caixa de borda de um elemento. É uma das quatro propriedades detalhadas em que a abreviação border-radius se expande — as outras sendo border-top-left-radius, border-bottom-right-radius e border-bottom-left-radius. Use esta propriedade detalhada quando quiser arredondar um único canto sem afetar os outros três.
Esta propriedade é uma das propriedades CSS3.
A forma do arredondamento depende dos valores fornecidos:
- Canto reto — quando o raio é
0(o padrão), o canto permanece pontiagudo. - Canto circular — quando você fornece um único valor (ou dois valores iguais), o canto é um quarto de círculo com esse raio.
- Canto elíptico — quando você fornece dois valores diferentes, o canto é um quarto de uma elipse.
Se o elemento tiver uma imagem de fundo ou cor de fundo, ela é recortada na borda arredondada. O quanto é recortado é controlado pela propriedade background-clip.
A propriedade aceita valores length, percentage, initial e inherit, e especifica os raios horizontal e vertical do canto superior direito arredondado. Quando um valor é fornecido, ele define tanto o raio horizontal quanto o vertical (canto circular). Com dois valores, o primeiro define o raio horizontal e o segundo define o raio vertical (canto elíptico). As percentagens para o raio horizontal são relativas à largura da caixa, e as percentagens para o raio vertical são relativas à sua altura. Valores negativos não são permitidos.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. A borda superior direita é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.borderTopRightRadius = "25px"; |
Sintaxe
Sintaxe da Propriedade CSS border-top-right-radius
border-top-right-radius: length | % | initial | inherit;Vamos ver um exemplo em que apenas um valor é utilizado. Ele define tanto o raio horizontal quanto o vertical da elipse.
Exemplo da propriedade border-top-right-radius:
Exemplo da Propriedade CSS border-top-right-radius com apenas um valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Resultado
Quando dois valores são fornecidos, o primeiro define o raio horizontal e o segundo define o raio vertical, produzindo um canto elíptico.
Exemplo da propriedade border-top-right-radius com dois valores:
Exemplo da Propriedade CSS border-top-right-radius com dois valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Exemplo da propriedade border-top-right-radius em percentagens:
Exemplo da Propriedade CSS border-top-right-radius com valor em % (percentagens)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Quando usar
Use border-top-right-radius (em vez da abreviação border-radius) quando apenas o canto superior direito deve ser arredondado — por exemplo, o canto principal de uma aba, uma bolha de chat ou um cartão cujos outros cantos devem permanecer retos. Para arredondar todos os cantos de uma vez, a abreviação border-radius é mais curta:
/* Round only the top-right corner */
border-top-right-radius: 12px;
/* Round all four corners at once */
border-radius: 12px;Valores
A tabela abaixo lista os valores aceitos.
| Valor | Descrição | Experimente |
|---|---|---|
| length | Define a forma arredondada do canto superior direito. | Experimente » |
| % | Define a forma arredondada do canto superior direito em %. | Experimente » |
| initial | Define a propriedade para o seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. |