How to make rounded corners without images (one line code)

Sponsored Links

There are many ways to make rounded corners. Most of them uses Javascript and CSS codes. And I believe most websites use images to make rounded corners. But I prefer rounder corners without using images simply because I don't have to worry about images. There are several tutorials I have found in the Internet on how to make rounded corners without images. But the problems are: it has bugs, the code is too long (messy) for just making rounded corners or it will not work on other browsers.

I stumbled across this forum, tested the code and it worked perfectly! But the code is very confusing! All you have to do is add one line of code in your wrappers! This is by far the simplest, easiest and coolest way to get rounded corners on your containers of almost any size or dimension (radius) without using a single image. The guys at Mozilla have provided us support for this CSS standard. The code is actually simple. Just define the amount of radius you want for a given corner of a container's style declaration.

This is a step by step tutorial on how to make rounded corners without images with using only one line of code.

1. Login to your Blogger account.

2. Backup you Template.

3. Lets say we make our header with rounded corners. So locate the code below:

#header

If you want to make your sidebar and main wrappers with rounded corners just locate the codes below:

#main-wrapper {

AND

#sidebar-wrapper {

4. Between the { and } (open and close brackets), put the code below:

-moz-border-radius: 15px 15px 15px 15px;

The parameters are upper-left, upper-right, lower-right and lower-left CORNERS.

5. View your blog and it should look something like the screen shot above.

This is by far the neatest code to make rounded corners. Only one line of code! But the big problem with this is browser compatibility issue. Opera, Internet Explorer (IE), and Google Chrome just ignore the code and renders normal square corners. This will only work with Firefox and Safari. Lets just hope that Opera, Internet Explorer (IE), Google Chrome and other browsers could catch up on this.