CSS | свойство радиуса границы

Опубликовано: 1 Марта, 2022

Это свойство CSS для закругления угла элемента. Свойство border-radius используется для установки радиуса границы.

Свойство закругленного угла:

Синтаксис:

радиус границы: 1-4 длина |% / 1-4 длина |% | начальный | наследование;

border-radius: свойство border-radius может содержать одно, два, три или четыре значения.

border-radius: 35px; It is used to set border-radius of each corners. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. It sets all corner to the same value.
Example:

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

Output:

border-radius: 20px 40px; This property is used to set first value as top-left and bottom right corner and second value as top right and bottom left corners.
Example:

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

Output:

border-radius: 20px 40px 60px; This property is used to set first value to top-left corner, second value applied to top-right and bottom left corners and third value applied to bottom right corner.
Example:

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

Output:

border-radius: 20px 40px 60px 80px; This property is used to set first, second, third and fourth value of border radius to top-left, top-right, bottom-right and bottom-left corners respectively.
Example:

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

Output:

border-top-left-radius: This property is used to set the value to top-left corner.
Example:

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

Output:

border-top-right-radius: This property is used to set the value to top-right corner.
Example:

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

Output:

border-bottom-left-radius: This property is used to set the value to bottom-left corner.
Example:

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

Output:

border-bottom-right-radius: This property is used to set the value to bottom-right corner.
Example:

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

Output:

mixed border-radius property: This property is used to set all corners as given value.
Example:

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

Output:

Supported Browsers: The browser supported by CSS | border radius property are listed below:

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-

HTML CSS

CSS | свойство радиуса границы

РЕКОМЕНДУЕМЫЕ СТАТЬИ