Different techniques for nice rounded corners

techniques for creating rounded cornersRounded corners on boxes is properly one of the most discussed topics in web design. The need to change the standard boxes into something nicer with rounded corners is tremendous. Searching for this topic returns more than 3.000.000 results on Google!.

The interest for rounded corners is based on the fact, that with rounded corners, you can make your web design look much nicer.

In this article you will learn a new an very simple technique to get nice rounded corners in you website.

Nifty Corners Cube

Nifty Corner Cube rounded corners

Nifty Corners Cube, is the newest version of the legendary Nifty Corners solution. Nifty Corners Cube uses Javascript and CSS to make nice rounded corners for content within a DIV. The nifty Corners technique doesn’t require any images. The Benefits of this script is, that it’s supported by all major browsers, but it requires an additional js file and javascript, which might slow the loading of your site down.

Rounded corners with images

Rounded corners with images

There are many ways of getting rounded corners, by placing images in the corners. One of the better solutions is developed by Adam Kalsey. The Kalsey solution is very simple; Create a general div

Box by Tedd

Box by Tedd rounded corners

The box by Tedd solution uses 8 images, and can be used for very flexible boxes with nice graphical effects. Box by Todd is supported by all the major browsers.

jQuery rounded corners

Rounded corners with jQuery

If you’re already using jQuery on your site, you can easily make fantastic boxes with rounded corners. The jQuery solutions are typically working in all major browsers, but since the solution is based on javascript, there is a risk, that it might slow down your site.

CSS 3 rounded corners

Rounded corners with CSS 3

One of the new fearures in CSS 3, is the possibility to specify how corners on boxes should be rounded. So with a very simple CSS specification, you can easily make the highly desired rounded corners.

The CSS below draws a grey box with a black border, and rounded corners with a 5 pixels radius.

.rounded-box {
  background-color: #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #000;
}

The advantage of using the CSS 3 solution is that it don’t use javascript or images, which makes the solution very fast. The problem with this solution is limited browser support. Currently its only Mozilla Firefox and Safari that supports CSS 3. However other browser are expected to follow soon.

If seen by a browser that doesn’t support CSS3, the code above will just display the same box, but without the rounded corners.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

One Reply to Different techniques for nice rounded corners

  1. Wow this is a great resource.. I’m enjoying it.. good article

Comments are now closed for this article.