É uma propriedade CSS arredondar a esquina de um elemento. A propriedade border-radius é usada para definir o raio da borda. 
 

border-radius-property

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 de fronteira

  • 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: 

border-radius-two -value

  • 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-three-value

  • 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-radius-four-value

  • 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-left-radius

  • 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-top-right-border

  • 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-left-radius

  • 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: 
 

border-bottom-right-radius

  • 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: 

propriedade de raio de borda mista

  • 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-