Ads Top

What is border radius css?

 CSS Rounded Corners: border-radius CSS using for the creating any box or any container where we can add corner rounded with css. As we can use on the creating button with border-radius: 10px;. If we will use border in the percent then it create a circle or the oval size.

border-radius: top-left top-right bottom-right bottom-left;

border-radius10px 20px 30px 40px;

Example border-radius code below:

 

<!DOCTYPE html>
<html>
<head>
<style> 
bodyfont-family:arial}
#demo1 {
  border3px solid #0bf;
  padding10px 20px;
  border-radius10px;
}
#demo2 {
  border3px solid #0bf;
  padding10px;
  border-radius50%;
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;  
}
#demo3 {
  border3px solid #0bf;
  padding10px 20px;
  border-radius50%;
}
#demo4 {
  border3px solid #0bf;
  padding10px 20px;
  border-radius10px 20px 30px 40px;
}
#mainmax-width400pxmargin20px auto;}
</style>
</head>
<body>
<div id="main">
<h2>Normal border Radius</h2>
<div id="demo1"> You can use any content</div>
<h2>border-radius with circle</h2>
<div id="demo2">Test</div>
<h2>border-radius with oval</h2>
<div id="demo3"> <p>You can use any content</p></div>
<h2>border-radius with all corner different</h2>
<div id="demo4"> <p>You can use any content</p></div>
</div>
</body>
</html>

 

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.