Custom Search

Monday, February 23, 2009

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.

9 comments:

EditorPinoy said...

How to put Navigation Tabs in Blogger using CSS Tab Designer

EditorPinoy said...

Top 10 Best-Clean-Professional-Looking Blogger Templates

lg2006 said...

How does one do this with images , like to make photos on blogger show up with rounded corners?

Radu said...

well the code is "-moz-border-radius: 15px 15px 15px 15px;" and i belive "moz" stands for mozilla firefox. It's a cool fast way to do rounded corners, but the browser compatibility bugs me! there are still lots of people usig IE or Opera. Although I love firefox,I use Chrome because it's working faster on my PC, and firefox keeps forgetting to "log me in automaticaly" and that is annoying. Chrome dosen't have that problem. If you only use firefox, this code is perfect. belive me, I was searching for a easier way, with less code, to create rounded corners. Thanks for your time.

Susie Hovendick Chan said...

I noticed your favicons don't show up.
I use Firefox, but I don't make my blog for me. Like you, I hope the other browsers catch up!

Susie Hovendick Chan said...
This comment has been removed by the author.
Ella Preuss said...

Man, this is awesome! I've been looking for this, and it was always about images, but this is so much easier!
Thanks :D

CherryCheek said...

This doesn't work on my sidebar :(
Do I have to delete the sidebar background or something?

Elizabeth said...

Thank you so much!! This worked perfectly on my main wrapper!

Post a Comment

Please subscribe to my rssfeed 16x16 button Subscribe to my RSS Feed or email subscription 16x16 button Subscribe via Email if you want to receive updates. Thanks! ^_^