CSS | propriedade border radius
É uma propriedade CSS arredondar a esquina de um elemento. A propriedade border-radius é usada para definir o raio da borda.
Valor padrão: 0
Propriedade de canto arredondado:
Sintaxe:
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
border-radius: a propriedade border-radius pode conter um, dois, três ou quatro valores.
- raio da borda: 35px; É usado para definir o raio da borda de cada canto. É a combinação de quatro propriedades: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Ele define todos os cantos com o mesmo valor.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 35px;</p>
</div>
</body>
</html>
Saída:
- raio da borda: 20px 40px; Esta propriedade é usada para definir o primeiro valor como canto superior esquerdo e inferior direito e o segundo valor como cantos superior direito e inferior esquerdo.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px;</p>
</div>
</body>
</html>
Saída:
- raio da borda: 20px 40px 60px; Esta propriedade é usada para definir o primeiro valor para o canto superior esquerdo, o segundo valor aplicado aos cantos superior direito e inferior esquerdo e o terceiro valor aplicado ao canto inferior direito.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px 60px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px 60px;</p>
</div>
</body>
</html>
Saída:
- border-radius: 20px 40px 60px 80px; Esta propriedade é usada para definir o primeiro, segundo, terceiro e quarto valores do raio da borda para os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo, respectivamente.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px 60px 80px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px 60px 80px;</p>
</div>
</body>
</html>
Saída:
- border-top-left-radius: Esta propriedade é usada para definir o valor para o canto superior esquerdo.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-left-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-left-radius: 35px;</p>
</div>
</body>
</html>
Saída:
- border-top-right-radius: Esta propriedade é usada para definir o valor para o canto superior direito.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-right-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-right-radius: 35px;</p>
</div>
</body>
</html>
Saída:
- border-bottom-left-radius: Esta propriedade é usada para definir o valor para o canto inferior esquerdo.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-bottom-left-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-bottom-left-radius: 35px;</p>
</div>
</body>
</html>
Saída:
- border-bottom-right-radius: Esta propriedade é usada para definir o valor para o canto inferior direito.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-bottom-right-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-bottom-right-radius: 35px;</p>
</div>
</body>
</html>
Saída:
- propriedade Mixed border-radius: Esta propriedade é usada para definir todos os cantos como valores fornecidos.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-left-radius: 35px;
<br>border-top-right-radius: 35px;
<br>border-bottom-left-radius: 35px;
<br>border-bottom-right-radius: 35px;</p>
</div>
</body>
</html>
Saída:
- Google chrome 5.0, 4.0 -webkit-
- Internet Explorer 9.0
- Firefox 4.0, 3.0 -moz-
- Opera 10.5
- Safari 5.0, 3.1 -webkit-
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva