Open In App

W3.CSS Round

Improve
Improve
Like Article
Like
Save
Share
Report

Border radius is used to make the corner of the border curved. More the radius, more curved and round it will be. These classes can be applied to any division, image, buttons, containers, etc.

Sr. No.

Class

Description

1.

w3-round-small

It sets the border-radius of the element to 2px.

2.

w3-round

It sets the border-radius of the element to 4px.

3.

w3-round-medium

It works the same as w3-round and sets the border-radius of the element to 4px.

4.

w3-round-large

It sets the border-radius of the element to 8px.

5.

w3-round-xlarge

It sets the border-radius of the element to 16px.

6.

w3-round-xxlarge

It sets the border-radius of the element to 32px.

7.

w3-circle

It sets the border-radius to 50%.

In W3.CSS, the following classes as used in the code are used to implement a border-radius at all corners of the division.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
    <style>
  
        /* CSS Style for Boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 6px;
            background-color: #DCDCDC;
        }
    </style>
</head>
  
<body>
    <!-- w3-container is used to add 
        16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
        content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Round Bordered Divisions in W3.CSS -->
    <div class="w3-container">
  
        <!-- Round Bordered Divisions -->
        <h3 class="w3-text-blue">
            Round Bordered Divisions:
        </h3>
          
        <!-- Below classes are used to add radius  
                 to the borders -->
        <span class="w3-round-small"></span>
        <span class="w3-round"></span>
        <span class="w3-round-medium"></span>
        <span class="w3-round-large"></span>
        <span class="w3-round-xlarge"></span>
        <span class="w3-round-xxlarge"></span>
        <span class="w3-circle"></span>
    </div>
</body>
  
</html>


Output:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads