With the apparent onset of Web 2.0, and the almost instant embrace of HTML5 and CSS3, it’s only natural that we begin working with them.
So today I will be showing you how to use the “border-radius” attribute in CSS3. This comes out of W3C’s CSS3 Backgrounds and Borders Module.
This will allow you to create a rounded box, without any images or javascript.
Now doing this used to be such a task, creating the images, placing them in the css, etc. But with this CSS3 module, we can do it with ease.
<div style=”background-color: #333; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #666; padding: 10px;”>
That’s it!
Wondering about browser compatibility are you? Take a look at this great table showing the definition and syntax for border-radius
From: The Art of Web
Unfortunately Internet Explorer does not support this, but you can go ahead and get a head start as Mozilla Firefox, Safari, and Google Chrome will support it.
So there it is, not too much work? Thanks for stopping by!
Douglife.info runs on Thesis. Your site should too!
Are you a blogger that doesn't understand a lot of PHP? Are you looking for a theme with Flexibility, Easy Customizations, Rock Solid SEO, and Outstanding Support?
If so Thesis is for you. Using Thesis you will have more control over layout and design than you ever thought possible. Simply point & click.
