Learn HTML Online – Study HTML the Best Way

The web is evolving, and technologies are fast taking over those former, trivial methods we’ve used to design websites. From flash video being replaced by browser-based video players, to CSS being able to replace images, there is a huge shakeup approaching for HTML and CSS standards.

One of the great new features of CSS3, is its ability to have rounded borders, which if used correctly will look much better than using images! Whilst not all web browsers currently support rounded corners, all of the newer, popular browsers do. Today I’m going to show you how to create CSS based rounded content boxes on your website!So, why use CSS to make rounded corners, instead of the traditional image method? Well, there’s a number of reasons:

• Lower overheads due to no images being loaded
• Very easy to change colors or use a CSS style switcher to instantly change the colors of those rounded boxes
• Supported in CSS3, so is a web-standard that will be supported by modern browsers
• Allows your rounded boxes to be flexible. They can be enlarged (width and height) without causing the corners to become distorted or misshaped.

Supported Browsers

CSS3 rounded corners are supported in most modern browsers. A few browsers adopted their own method of doing rounded corners before it became a standard, so the examples below will contain CSS code that is compatible with these individual browsers. Overall, its possible to do CSS based rounded corners in the following browsers:

• Firefox (3+)
• Safari (3+)
• Internet Explorer 6 (buggy)
• Internet Explorer 7
• Internet Explorer 8
• Google Chrome (all)
• KHTML Browsers (e.g Konqueror)
• Opera (10.5+)

As you can see, pretty much all major web browsers fully support CSS rounded corners. I must stress that this list is NOT complete, and browsers based on the same engines as those above should also support modern CSS3 techniques.

The Code

Currently, CSS3 rounded corners are not finalized in the CSS3 specification. Because of this, a few browser engines such as Mozilla’s Gecko engine (powers Firefox and Camino) and Apple’s Webkit engine (Powers Safari and Chrome) use custom CSS, as shown below:

As you can see, there are unfortunately a few extra lines of code to get this working in most browsers. Whilst there is no doubt that all browsers will eventually use the ‘border-radius’ method, for now its all a bit up in the air! In addition to those listed above, some minor engines such as KHTML also use their own ways of doing rounded corners.

So, lets put this to some real-world use!

Examples

Our first example, is a basic rounded content box:

#rounded_box {
	padding: 2px;
	background: #7AA4CE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

You can preview the final outcome HERE.

Our second example uses selective rounded corners to create an alternative effect:

#rounded_box {
	padding: 2px;
	background: #7AA4CE;
	border-radius-top-left: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	border-radius-bottom-right: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

You can preview the final outcome HERE.

Finally, a completely different approach to using this great feature:

#rounded_box {
	padding: 2px;
	background: #7AA4CE;
	border-radius-top-left: 20px;
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	border-radius-bottom-right: 20px;
	-moz-border-radius-bottomright: 20px;
	-webkit-border-bottom-right-radius: 20px;

	border-radius-top-right: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	border-radius-bottom-left: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

You can preview the final outcome HERE.

There are many, many ways this can be used, and the above examples show how you could use them for typical message boxes. A real world example is our current design here at StudyHTML.com – All those rounded corners you see are generated by CSS, and not images!

What do you think of Imageless CSS rounded corners? Do you think they will become a major part of design along with other new CSS3 techniques? Let us know below!