in

CSS ROUNDED CORNER | Add Round Corners to Elements Using CSS

In this tutorial we will be looking at CSS ROUNDED CORNERS which entails how to add round corners to elements using CSS properties. In our previous tutorial we looked at CSS LAYOUT and we discussed how to structure the layout of web page documents using CSS style properties. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS LAYOUT | Steps To Structure a Beautiful Layout Using CSS

CSS ROUNDED CORNER

Adding rounded corner is very easy using CSS. We can achieve a well-placed rounded corner using the border-radius CSS property. A simple style syntax for this is shown below

.rounded_corners {
   border-radius: 60px;
   background: red;
   padding: 15px; 
   width: 25px;
   height: 70px; 
}

The above example shows how to add a round corner to all sides of an element. Below is table showing the list of property values that can be used with the border-radius property

  • border-radius – use to specify the border radius of all part of the element
  • border-top-left-radius – use to specify the radius of the top left part of the element
  • border-top-right-radius – use to specify the radius of the top right part of the element
  • border-bottom-left-radius – use to specify the radius of the bottom left part of the element
  • border-bottom-right-radius – use to specify the radius of the bottom right part of the element

Example below shows the illustration of the use of border-radius property

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .border_radius{
         background-color: red;
         height: 100px;
         width: 100px;
         border-radius: 18px;
         color: seashell;
         text-align: center;
      }
   </style>
   
   <title>ILLUSTRATION OF BORDER RADIUS</title>
</head>
<body>

   <div class="border_radius">
      border radius

   </div>
   
</body>
</html>

RESULT

ILLUSTRATION OF BORDER RADIUS
border radius

illustration using the different border radius properties

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .border_radius{
         background-color: red;
         height: 100px;
         width: 100px;
         color: seashell;
         text-align: center;
         border-top-left-radius: 18px;
         border-top-right-radius: 18px;
         border-bottom-left-radius: 18px;
         border-bottom-right-radius: 18px;
      }
   </style>
   
   <title>ILLUSTRATION OF THE INDIVIDUAL BORDER RADIUS PROPERTY</title>
</head>
<body>

   <div class="border_radius">
      border radius

   </div>
   
</body>
</html>

RESULT

ILLUSTRATION OF THE INDIVIDUAL BORDER RADIUS PROPERTY
border radius

CONCLUSION

Now you have learnt a little tweak on how to create CSS ROUNDED CORNER using the border radius property, you can as well limit the rounded corner to a particular side of the element depending on your specification and requirement and also change the background color. lets move on to the next topic on CSS BORDER IMAGES

What do you think?

css layout

CSS LAYOUT | Steps To Structure a Beautiful Layout Using CSS

css border images

CSS BORDER IMAGES | Add images to Element Borders Using CSS