CSS3 Rounded Corners
Share this Dreamweaver Article:
Once upon a time, putting curved corners or rounded edges into your website designs using just CSS would have been the stuff of legend. Instead, Images would have to be made to mimic corners and would be placed as background images. It was a long and arduous task.
Now, it is entirely possibly to create curved edges or round corners using css. By the way, if you are viewing this page in Internet Explorer, you will not be able to see the css rounded corners in the box above this paragraph.
The css curved edges in this css tutorial are made using new CSS3 Capabilities. Any browser which utilizes the Moz prefix or Webkit prefix will be able to display CSS3 rounded corners. CSS rounded corners using the Moz attribute will display in Firefox, SeaMonkey, Flock and any other browser which uses the Gecko rendering engine. Conversely, CSS rounded corners using the Webkit prefix will display in Google Chrome and Safari.
Internet Explorer and Opera are working on CSS3 support as you are reading this but CSS rounded edges will not display in those browsers at this time.
1. Create a div to practice CSS Curved Edges
Let's create a simple div and give it a background color to practice styling CSS rounded corners with. You should copy and paste this code into web page:
<div class="corners"> <p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p> </div> <!-- end Corners class -->
2. Use CSS for Rounding all four corners
Copy and paste this CSS with the added CSS3 rounded corners attributes into a style sheet attached to your web page.
The height of the div has been set to auto with a width of 150 pixels. A background color has also been set so you can see the css rounded corners against a white background. Margins and padding have also been set to adjust the paragraph content inside of the div.
Optional paragraph styling has been added for you to copy and paste if you wish to do so.
.corners { height:auto; width:150px; background:#8BBEA9; margin:20px; padding:30px; -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari and Chrome */ } /* Optional Paragraph Styling */ .corners p { text-shadow:1px 1px 1px #FFF; text-align:justify; font-size:16px; margin:0; padding:0; }
If you copied and pasted the code correctly, you should end up with a div styled like this with all four curved corners styled using css.
You will see from this example that the div now has all four rounded corners using CSS. Styling all four CSS curved edges with CSS3 is fine, but what if you wanted to style only two corners, or how about just one styled corner using CSS3?
CSS3 Individual Rounded Edges Styling
To style individual corners you will need to know the following CSS3 rounded corners attributes. The syntax used between the css rounded corners with the Moz prefix and the css rounded corners with Webkit prefix is slightly different. Expect them to be integrated into one generic term once CSS3 is in full cross browser usage.
Here are the CSS rounded corners Styles for the Moz prefix that Firefox, Flock, SeaMonkey and all other up to date Gecko rendering engines use:
/* Styles for Firefox, Flock and SeaMonkey * / -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px;
Here are the CSS rounded corners styles for the Webkit engine that Chrome and Safari use:
/* Styles for Google Chrome and Safari */ -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-left-radius:15px; -webkit-border-bottom-right-radius:15px;
Individual CSS Curved Corners Examples
To apply individual CSS3 corners simply choose each curved corner attribute you want and apply it to the div styles. Most corners you apply will be between 5 pixels and 90 pixels but you can go as extreme as 200 pixels if you want.
This div has been styled to have corners on the top right and bottom left
This div has been styled to have the bottom left corner radius larger than the top right's
Remember to apply both the Webkit prefix and the Moz prefix if you want the CSS rounded corners to show in most of the major browsers.
Related Tutorials:
CSS3 Rounded Corners - video Tutorial
CSS3 Text Shadows - Video Tutorial
CSS3 Box Shadows - Video Tutorial