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-radius: 10px 20px 30px 40px;
Example border-radius code below:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-family:arial}
#demo1 {
border: 3px solid #0bf;
padding: 10px 20px;
border-radius: 10px;
}
#demo2 {
border: 3px solid #0bf;
padding: 10px;
border-radius: 50%;
width:100px;
height:100px;
line-height:100px;
text-align:center;
}
#demo3 {
border: 3px solid #0bf;
padding: 10px 20px;
border-radius: 50%;
}
#demo4 {
border: 3px solid #0bf;
padding: 10px 20px;
border-radius: 10px 20px 30px 40px;
}
#main{ max-width: 400px; margin: 20px 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:
Note: Only a member of this blog may post a comment.