How to create CSS3 Rounded Corners?

In this tutorial, we will learn to create CSS3 rounded cornered with examples.
Submitted by Apurva Mathur, on June 24, 2022

The border-radius property of CSS converts the normal edges of any borders into the corners. This property is commonly used to set image edges. This property does not have any specific value; you can set the value according to your desire. To apply this property it’s important to first provide the border value.

Syntax:

selector/element {
	border-radius: value;
}

Example:

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   
   <style>
      .one{
      border: 4px solid salmon;
      border-radius: 25%;
      height: 60px;
      width: 20%;
      font-size: 30px;
      }
      p{
      text-align: center;
      }
      img{
      margin-top: 1%;
      border-radius: 50%;
      }
      .two{
      border: 4px solid black;
      border-radius: 100%;
      height: 60px;
      width: 20%;
      font-size: 20px;
      }
   </style>
   
   <body style="background-color: whitesmoke">
      <div class="one">
         <p>  Border radius 25%</p>
      </div>
      <h3>Border radius 50%</h3>
      <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" height="10%" width="30%" >
      <div class="two">
         <p>Border radius 100%</p>
      </div>
   </body>
</html>

Output:

Example: CSS3 Rounded Corners

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.