CSS Code to Make Rounded Corners Border
You can use the following CSS code to make rounded corners border on each shapes you are going to create.
border-radius:10px; // makes radius of all the corners 10px;
You can also specify the radius for each corners by using border-radius-top-right, border-radius-top-left, border-radius-bottom-right, border-radius-bottom-left keywords. For example you can use the following CSS code to make rounded corners border.
border-radius-top-right:10px; border-radius-top-left:10px; border-radius-bottom-right:5px; border-radius-bottom-left:5px;
To makes this CSS code browser specific or specific browser compatible, you have to use the prefix codes like -moz- for mozilla firefox and -webkit- for chrome or safari.
.all{ border:2px solid red; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; width:250px; } .topleft{ border:2px solid red; -moz-border-top-left-radius:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px; width:250px; } .topright{ border:2px solid red; -moz-border-top-right-radius:10px; -webkit-border-top-right-radius:10px; border-top-right-radius:10px; width:250px; } .bottomleft{ border:2px solid red; -moz-border-bottom-left-radius:10px; -webkit-border-top-left-radius:10px; border-bottom-left-radius:10px; width:250px; } .bottomright{ border:2px solid red; -moz-border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-right-radius:10px; width:250px; }
Use above CSS code with the following HTML code given.
<html> <head> <title>CSS code for rounded corners </title> <style type="text/css"> //place the above CSS code </style> </head> <body> <div class="all">All rounded corners </div> </br> <div class="topleft">Topleft rounded corner</div> <br/> <div class="topright">Topright rounded corner</div> </br> <div class="bottomleft">Bottomleft rounded corner</div> <br/> <div class="bottomright">Bottomright rounded corner</div> </body> </html>
You can view the following rounded corners for 2px solid red border and 250px width having 10px radius of corners.
%CODE1RC%
You can apply these rounded corners shapes to make CSS buttons, menus etc. Here is a sample code to make CSS button along with background color.
<div style="border:2px solid light-blue; -moz-border-radius:10px; background-color:blue; z-index:10;-webkit-border-radius:10px; border-radius:10px;width:110px;text-align:center; color:white;cursor:pointer;"> CSS button </div>
Read Next: How to Design Webpages using CSS Attribute Selectors
Comments are closed.