Propriedade CSS border-bottom-left-radius
O CSS border-bottom-left-radius arredonda o canto inferior esquerdo de um elemento. Veja sintaxe, valores e exemplos.
A propriedade border-bottom-left-radius especifica o arredondamento do canto inferior esquerdo do elemento.
A propriedade border-bottom-left-radius é uma das propriedades do CSS3.
Se você não especificar um valor, o canto permanece em ângulo reto. Quando um valor é fornecido, ele cria um quarto de elipse. Se você usar uma imagem de fundo ou cor, ela será recortada na borda. O processo de recorte é definido pelo valor da propriedade background-clip.
A propriedade border-bottom-left-radius possui dois valores: comprimento e porcentagem. Quando apenas um valor é fornecido, ele especifica os raios horizontal e vertical da elipse. Se dois valores forem fornecidos, o primeiro define o raio horizontal e o segundo define o raio vertical.
As porcentagens para o raio horizontal referem-se à largura da caixa; as porcentagens para o raio vertical referem-se à altura da caixa. Valores negativos não são permitidos.
Se a propriedade abreviada border-radius for aplicada após border-bottom-left-radius, ela substitui o valor da propriedade individual. Por esse motivo, ao definir cantos individualmente, declare-os depois de qualquer abreviação border-radius. A propriedade border-bottom-left-radius é mais útil quando você deseja arredondar apenas um canto de um elemento — por exemplo, um balão de chat, um cartão com um único canto arredondado ou um botão com formato personalizado — deixando os outros três cantos em ângulo reto.
| 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 inferior esquerda é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.borderBottomLeftRadius = "35px"; |
Sintaxe
Sintaxe da Propriedade CSS border-bottom-left-radius
border-bottom-left-radius: length| % | initial | inherit;Exemplo da propriedade border-bottom-left-radius:
Exemplo da Propriedade CSS border-bottom-left-radius com valor em px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Resultado
Exemplo da propriedade border-bottom-left-radius com dois valores:
Exemplo da Propriedade CSS border-bottom-left-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-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Aqui 30px é o raio horizontal e 15px é o raio vertical, produzindo um canto elíptico (não circular) que é mais largo do que alto.
Exemplo da propriedade border-bottom-left-radius com o valor "porcentagem":
Exemplo da Propriedade CSS border-bottom-left-radius com valor %(porcentagem)
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| length | Especifica o arredondamento do canto inferior esquerdo em "px". | Experimente » |
| % | Especifica o arredondamento do canto inferior esquerdo em porcentagem. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Suporte de navegadores
A propriedade border-bottom-left-radius é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. Nenhum prefixo de fornecedor é necessário atualmente.
Propriedades relacionadas
border-bottom-left-radius controla um único canto. Para arredondar outros cantos ou todos eles de uma vez, use estas propriedades relacionadas:
- border-radius — abreviação que define todos os quatro cantos em uma única declaração.
- border-bottom-right-radius — arredonda o canto inferior direito.
- border-top-left-radius — arredonda o canto superior esquerdo.
- border-top-right-radius — arredonda o canto superior direito.