X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Created Rounded Corners on Layout Objects in CSS3

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.


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link