How to make round corners with CSS3

Creating round corners on your design is fully achievable with CSS3 without using images. It’s a neat looking solution for designers of all kinds. Most browsers have support for this feature, but not all of them. CSS3 brings many new features and improvements for web developers which we all have been waiting for, for a long time. Look below and I’ll show you.

The CSS

#divexample {
border-radius: 10px;
}

The result will look like this:

This is a test.

The trick you need to pay attention to is line 2 in the code. (highlighted with green) As it says the border radius is set to 10px. Since we only defined the border-radius with 1 value, it’ll interpret it for both horizontal and vertical values. You can define them all further if you so wish to. I also forgot to include support for Mozilla Firefox in the code. Firefox doesn’t have support for the W3C border-radius code, so you need to use mozilla’s implementation. It’s really simple and I’ll show you below:

#mozilla {
border-radius: 10px;
-moz-border-radius: 10px;
}
As you can see, the only difference is line 2. We added ‘-moz’ before border-radius like you normally would write.

I’ll leave some examples of what you can achieve with this effect.

#example1 {
border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}
Example1
#Example2 {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
2

These codes should work normally with Safari, Chrome, Opera and even IE9.

About the Author

Loves to play videogames, fiddling with webdesign and generally anything which is related to technology. Currently works as a IT consultant for Palantir AS, located in Norway.