CSS Rounded Corners (border-radius property) Best 10+ Examples

CSS rounded corners Like as a Elliptical border, Elliptical border, Ellipse border, Adding CSS3 Border Images and Creating CSS3 Rounded Corners Example with demo Inverted Rounded Corner Border Radius In CSS.

Many web full stack developers in the quickly, put the images instead of css rounded corners, because the default appearance of the box borders pointed right-angled corners. But now you can use the CSS3 border-radius property supports all the devlopers as well as web designers to draw the simple way to create a rounded corners .

CSS Rounded Corners

CSS Set Individual Rounded Corners
The main 4 values for each radius are given Like as, bottom-right, bottom-left, top-left and top-right.

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
css rounded corners
css rounded corners

All corners : Rounded Corners

-webkit-border-radius: 36px 12px;

Right corners only: Rounded Corners

-webkit-border-top-right-radius: 50px 30px; 
-webkit-border-bottom-right-radius: 50px 30px;

Standard Format for css rounded corners

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;

Creating CSS3 Rounded Corners

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 Rounded Corners - www.pakainfo.com</title>
<style>
	.roundcorner1 {
		width: 300px;
		height: 150px;
		background: #3d3d3d;
		border: 2px solid #c60000;
		border-radius: 20px;
	}
</style>
</head>
<body>
    <div class="roundcorner1"></div>
</body>
</html>

Adding CSS3 Border Images

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Border Images - www.pakainfo.com</title>
<style>
	.roundcorner2 {
		width: 300px;
		height: 150px;
		border: 15px solid transparent;
		-webkit-border-image: url("/domain_name/media/your_icno_border.png") 30 30 round; /* Safari 3.1-5 */
		-o-border-image: url("/domain_name/media/your_icno_border.png") 30 30 round; /* Opera 11-12.1 */
		border-image: url("/domain_name/media/your_icno_border.png") 30 30 round;
	}
</style>
</head>
<body>
    <div class="roundcorner2"></div>
</body>
</html>

How to draw a circle using CSS ?

<html>
<head>
  <style>
    div {
      border:5px solid #c60000;
      padding:30px;
      background:#3d3d3d;
      width:100px;
      height:100px;
      border-radius:100px;
    }
  </style>
</head>
<body>
  <div>Circle</div>
</body>
</html>

CSS Rounded Corners

<!DOCTYPE html>
<html>
<head>
<style> 
#roundcorner1 {
  border-radius: 25px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px;  
}

#roundcorner2 {
  border-radius: 25px;
  border: 2px solid #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px;  
}

#roundcorner3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 19px; 
  width: 199px;
  height: 149px;  
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>

<p>circumnavigate section for this an element with a specified all background color:</p>
<p id="roundcorner1">circumnavigate section!</p>
<p>circumnavigate section for this an element with a border:</p>
<p id="roundcorner2">circumnavigate section!</p>
<p>circumnavigate section for this an element with a all background image:</p>
<p id="roundcorner3">circumnavigate section!</p>

</body>
</html>

CSS border-radius – Specify Each Corner

<!DOCTYPE html>
<html>
<head>
<style> 
#roundcorner1 {
  border-radius: 14px 49px 29px 5px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px; 
}

#roundcorner2 {
  border-radius: 14px 49px 29px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px; 
}

#roundcorner3 {
  border-radius: 14px 49px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px; 
} 

#roundcorner4 {
  border-radius: 14px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px; 
} 
</style>
</head>
<body>

<h2>The border-radius Property</h2>

<p>4 values - Main border-radius: 14px 49px 29px 5px:</p>
<p id="roundcorner1"></p>

<p>3 values - Main border-radius: 14px 49px 29px:</p>
<p id="roundcorner2"></p>

<p>2 values - Main border-radius: 14px 49px:</p>
<p id="roundcorner3"></p>

<p>1 value - Main border-radius: 14px:</p>
<p id="roundcorner4"></p>

</body>
</html>

css border-radius circle

<!DOCTYPE html>
<html>
<head>
<style> 
#roundcorner1 {
  border-radius: 49px / 14px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px; 
}

#roundcorner2 {
  border-radius: 14px / 49px;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px; 
}

#roundcorner3 {
  border-radius: 50%;
  background: #3d3d3d;
  padding: 19px; 
  width: 199px;
  height: 149px;
} 
</style>
</head>
<body>

<h2>The border-radius Property</h2>

<p>Elliptical - border-radius: 49px / 14px:</p>
<p id="roundcorner1"></p>

<p>Elliptical - border-radius: 14px / 49px:</p>
<p id="roundcorner2"></p>

<p>Ellipse - border-radius: 50%:</p>
<p id="roundcorner3"></p>

</body>
</html>

How to Create Boxes with Rounded Corners in CSS?

Example: css rounded corners

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: inline-block;
   width: 310px;
   height: 310px;
   text-align: center;
   font-size: 25px;
}
.roundcorner3 {
   border-radius: 25px;
   border: 4px solid green;
}
.simple {
   border: 4px solid green;
   margin-left: 20px;
}
</style>
</head>
<body>
<h2>CSS3 rounded corner example - Pakainfo</h2>
<div class="roundcorner3">Rounded Corners</div>
<div class="simple">Simple corners</div>
</body>
</html>

I hope you get an idea about css rounded corners.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.