All Articles Web
Created Rounded Corners on Layout Objects in CSS3
Geoff Blake on Thu, April 21st | 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, and one we'll be talking a look at here, border radius. Border radius allows us to set rounded corners on otherwise rectangular objects in our web layouts.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Step 1 - Applying A CSS3 Border Radius

First, let's apply border radius. In your style sheet, find the rule that you'd like to apply the rounded corner effect to. Often, this'll be an ID selector that's controlling a div element. Make sure too that you're also applying a background color or a border (or both) so that you can see the corners!

Next, add the "border radius" property to your rule, followed by a value. The higher the value you use, the more rounded the corner.

Here, I'm applying the border radius to my #Content ID selector, which is controlling the div that holds my page content, as you can see in the included screen shot. Make sure to save your work and check out your work in your browser.

If you're still getting 90-degree corners, then your browser is one that doesn't support this feature. But don't pack things in just yet. Let's check out that cool trick I mentioned earlier.

Step 2 - Ensuring The Rounded Corner Effect Works

As mentioned, only the latest versions of popular browsers support CSS3's border radius property. So how can you ensure that your layout will work for users who are still using browsers that are a version or two behind? You can use some additional code, as follows.

First, let's add in "-moz-border-radius:" followed by a radius value. This targets what's referred to as Gecko browsers -- most notably FireFox.

Next, let's add in "-webkit-border-radius:" followed by the same value that we used above. This'll hit all WebKit-based browsers, like Chrome and Safari. Once added, save up your work and refresh your browser.

Step 3 - The Exception Proves the Rule

Now what about Internet Explorer, every web designer's favorite browser (sic), you ask? Well, all of the above options won't work. In fact, the code that we've added up to this point will simply be ignored by Explorer, and corners will simply render in their default 90-degree styling, which is better than having it break, right?! It is possible to pull off rounded corners in IE, but know that it is a bit of extra work; and maybe that's something that we could get into in a future tip. For the time being, though, enjoy your rounded corners in all the other browsers!

CSS is wonderful. Discover more on Designing Floating CSS Layouts.


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: