Propriedade CSS border-top-left-radius
A propriedade border-top-left-radius define o formato do canto superior esquerdo de um elemento. Veja exemplos práticos aqui.
A propriedade CSS border-top-left-radius arredonda o canto superior esquerdo da caixa de borda de um elemento. É uma das quatro propriedades individuais — junto com border-top-right-radius, border-bottom-left-radius e border-bottom-right-radius — nas quais a abreviação border-radius se expande. Use esta propriedade individual quando quiser arredondar apenas um canto.
A propriedade border-top-left-radius é uma das propriedades CSS3.
O canto pode ser arredondado em forma de círculo ou elipse, ou permanecer reto se nenhum valor for especificado. Se você usar uma imagem de fundo ou cor, ela será recortada conforme o formato da borda. O comportamento de recorte é controlado pela propriedade background-clip.
Como os valores funcionam
A propriedade border-top-left-radius aceita um ou dois valores, cada um especificado como <length> ou <percentage>:
- Um valor define os raios horizontal e vertical do canto, produzindo uma curva circular (quarto de círculo).
- Dois valores definem os raios de uma elipse: o primeiro é o raio horizontal, o segundo é o raio vertical.
Os percentuais para o raio horizontal referem-se à largura do elemento, enquanto os percentuais para o raio vertical referem-se à sua altura. Valores negativos são inválidos e a declaração é ignorada.
Atenção: se a soma dos raios em um lado exceder o comprimento desse lado, o navegador reduz proporcionalmente todos os raios de canto para que as curvas nunca se sobreponham. Portanto, um valor grande como
border-top-left-radius: 9999pxé uma forma segura de deixar o canto o mais arredondado que a caixa permite.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Sim. O raio da borda é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.borderTopLeftRadius = "25px"; |
Sintaxe
Sintaxe da propriedade CSS border-top-left-radius
border-top-left-radius: length | % | initial | inherit;Veja um exemplo de border-top-left-radius onde apenas um valor é usado. Quando apenas um valor é utilizado, ele define tanto o raio horizontal quanto o vertical da elipse.
Exemplo da propriedade border-top-left-radius:
Exemplo da propriedade CSS border-top-left-radius com apenas um valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-top-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Resultado
No exemplo a seguir, o primeiro valor define o raio horizontal e o segundo define o raio vertical.
Exemplo da propriedade border-top-left-radius com dois valores:
Exemplo da propriedade CSS border-top-left-radius com dois valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #ccc;
border: 4px solid #000000;
border-top-left-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>O exemplo a seguir usa valores em porcentagem. O primeiro valor define o raio horizontal e o segundo define o raio vertical.
Exemplo da propriedade border-top-left-radius com o valor "%":
Exemplo da propriedade CSS border-top-left-radius com valor em porcentagem
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #eee;
border: 4px solid #000000;
border-top-left-radius: 50% 60%;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| length | Define o arredondamento do canto superior esquerdo. | Experimente » |
| % | Define o arredondamento do canto superior esquerdo em porcentagem. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Quando usar a propriedade individual
Use border-top-left-radius quando apenas um canto precisar ser arredondado — por exemplo, uma aba, um balão de fala ou um cartão cujo topo fica alinhado a um cabeçalho. Para arredondar todos os cantos de uma vez, a abreviação border-radius é mais concisa:
/* These two rules are equivalent for a single corner */
border-top-left-radius: 25px;
border-radius: 25px 0 0 0;Propriedades relacionadas
- border-radius — abreviação para todos os quatro cantos.
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border — define largura, estilo e cor da borda.
Suporte dos navegadores
border-top-left-radius é suportado em todos os navegadores modernos (Chrome, Firefox, Safari, Edge) sem necessidade de prefixo de fornecedor.