So here’s the scenario: I was tasked with replacing several dozen Photoshop-generated rounded buttons for a larger site with an HTML/CSS/JS equivalent. Prior, any time anyone wanted to change text on a button (and it seemed to happen often), a graphic designer had to fire up Photoshop, modify a file, adjust for size, output an image, and pass that file off to the person building the page. It was an involved process for something that should have been simple.
So let’s make it simple!
Right away I knew that I wanted to present as simple a solution for the developer as I could. I didn’t want to force them to use tons of extra markup in their HTML to pull this trick off. This was a piece of cake in modern browsers, as you’ll see in a moment. Unfortunately, this site also has a large IE user base, so I needed to account for less-modern browsers as well.
Border-Radius for Those Who Can
I decided I wanted to use border-radius for the rounded buttons for any browsers that could support it. I also decided that I wanted to create a single class, “button,” for any buttons, and it should work more-or-less the same on anchor tags, button tags, and “submit-type input tags.
In short, my HTML should be as simple as this:
1 2 3 | <a href="link.html" class="button">A Button!</a> <button class="button">Also A Button</button> <input type="submit" class="button" value="Das Button" /> |
Input and button tags are admittedly tricky, as I’ve mentioned elsewhere. For this exercise we’ll ignore most of that and not worry about pixel-perfect results. Really, really close is good enough for me on this one.
My CSS for those happy modern browsers looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .button { display: inline-block; line-height: 1; padding: 7px 10px; text-decoration: none; font-weight: bold; color: #fff; background-color: #39c; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } input.button, button.button { border: 0px none; } |
The display: inline-block makes our button behave like a block-level element (width, height, padding and the rest), while still staying “in line”. Our border-radius is set at the bottom: 5px, all around. We use vendor-prefixed rules first, for Mozilla, Webkit, and Khtml browsers. Then we finish with the “standard” border-radius rule, which is currently supported by Opera 10.5. We also have a separate rule to remove the default border on input and button tags. The rest is just text and color styling.
And just like that, we have nice rounded buttons that work in Safari, Chrome, Firefox and even the latest version of Opera! So who missed the party bus? Our old friend Internet Explorer, of course (and Opera browsers older than two months, as well). The client wasn’t comfortable giving those users square buttons, so I had to do something, and step one of that something is being able to tell which browsers can’t handle border-radius.
Sniff the Diff
This is where that test for border-radius support that I built last week suddenly comes in handy. I simply include a small jQuery function, run the test, and I can now tell whether or not the browser supports border-radius (vendor prefixed or otherwise). If you missed my article last week, I’d be sure to check that out before going any further.
With the help of my $.support.borderRadius object, I can now write some jQuery to treat those browsers that don’t support border-radius differently.
Modify the DOM
There’s no good way to fake rounded corners in Internet Explorer without resorting to images. However, that doesn’t mean we’re stuck with creating a one-size-fits-all button image and dealing with inflexibility. Really, the only part of the button we’re worried about changing is the borders. So let’s just worry about them!
We’re going to use jQuery to create a structure that looks like this:
1 2 3 4 5 6 7 | <div class="buttonwrap"> <div class="tl"></div> <div class="tr"></div> <a href="link.html" class="button">Our Button</a> <div class="bl"></div> <div class="br"></div> </div> |
The buttonwrap div acts as a container for the rest of our elements, and will be relative positioned (but not moved) to turn it into a positioned parent, letting us move objects around inside it. The four corner divs are then absolutely positioned on top of our button and moved to the four corners (“tl” for top-left and so on).
Here’s the jQuery that gets it done:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | jQuery(function() { jQuery.support.borderRadius = false; jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() { if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true; return (!jQuery.support.borderRadius); }); }); $(function() { if(!$.support.borderRadius) { $('.button').each(function() { $(this).wrap('<div class="buttonwrap"></div>') .before('<div class="corner tl"></div><div class="corner tr"></div>') .after('<div class="corner bl"></div><div class="corner br"></div>'); }); } }); |
If the browser doesn’t support border-radius, we wrap our buttons in the buttonwrap div, then insert our four corner divs. Admittedly, we could have put all the corners in a row, but I like the idea of putting them in the same order they’ll appear visually. And sure, it’s five extra divs in our DOM… but they’re not in our HTML. I’m comfortable with that trade-off in this situation.
Now we need just two more pieces: the CSS to position everything properly, and the image that will let us fake our corners. Let’s deal with the image first.
One Image to Round Them All
You’ll be amazed at how simple this turned out to be (at least, I was!). We only need one teeny tiny image to round all four of our corners.
In my situation, I was dealing with dozens of buttons, some of different colors, but all on a white background. Because of that, I realized what I needed was a transparent PNG: white on the outside “background” area, and transparent on the inside to let my CSS button background color show through. And because my corners were all rounded the same amount, what I really needed in each corner was a quarter of a circle.
So what I did was open up Photoshop and create a 10px by 10px image. Then I gave it a white background, used the elliptical marquee tool to draw a circle in the center, and then deleted the center out (no feathering, but with anti-aliasing).
If you only had a single button color but multiple background colors, I’d still approach it the same basic way. I’d simply “select inverse” after creating my circle, delete the outside instead of the inside, and proceed the same.
Once I saved the image as a 24-bit PNG, my total file size was 182 bytes. If I were using a fancier image program like Fireworks, I probably could have gotten the image size even smaller. And admittedly, if you want the transparent PNG to work in IE6, you’ll need to use a PNG fix of some sort. But that’s outside the scope of this particular article. Google will assist in this one.
Now, using the power of CSS background positioning, I can show just a quarter of that image in each of my corners. Here’s my final IE-friendly CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .buttonwrap { display: inline-block; position: relative; zoom: 1; *display: inline; } .corner { position: absolute; width: 5px; height: 5px; background: transparent url(images/corner.png) no-repeat 0 0; } .tl { top: 0; left: 0; background-position: left top; } .tr { top: 0; right: 0; background-position: right top; } .bl { bottom: 0; left: 0; background-position: left bottom; } .br { bottom: 0; right: 0; background-position: right bottom; } |
Note: The “zoom” and “*display” rules above are a necessary hack that causes IE7 to mimic the inline-block property (which it does not implement correctly).
So that’s it! Here’s a working example for you to try out.
Limitations
I’ll admit it: this solution isn’t perfect. Just pretty darn convenient for my situation. Some limitations include:
- IE6 requires a PNG fix, as I mentioned earlier.
- You’re stuck with either one button color, or one background color, per image. Additional classes and images could expand this, though.
- Corners are all the same radii.
- It’d be tougher (though not impossible) with a border on the button.
- It hasn’t made me coffee (yet).
However, I expect this will be useful to someone else. I’ve already found two uses for it since I wrote the original code!
On April 23, 2010
3:12AM
Paweł P. said:
In the right time I read
this article. Good work (saved)
On April 23, 2010
8:03AM
Matthieu Desjardins said:
Love this!
I specially appreciate the cross-browser (even the dreaded IE6) compliance. Too many poeple these days don’t bother about this anymore and just say “The hell with them!”.
Good work!
On April 23, 2010
9:03AM
Vel said:
This isn’t simple. I don’t see a reason to use jquery. This can be done just with <a href=”#” rel=”nofollow”>Link</a> and with one image.
On April 23, 2010
9:30AM
Rob Glazebrook said:
Hi Vel,
(I fixed your comment code so it shows up properly, so I removed the other comments).
You could use just one image, as long as you were okay with all of your buttons being exactly the same size. That wasn’t so in my case. Our buttons varied in both height and width, so I needed a flexible solution that could work in dozens of different places (including places that we hadn’t even thought up yet!).
On April 23, 2010
10:13AM
Vel said:
Well, the code I’ve posted isn’t one that is shown in my comment :)
I’m talking about Sliding Door technique and here is tutorial how to make this with only one image http://kailoon.com/css-sliding-door-using-only-1-image/
On April 23, 2010
10:21AM
Rob Glazebrook said:
Ah, thanks for the link, Vel.
That is a similar technique, but not quite the same concept. Dimitar’s technique would work for elements that expanded horizontally, but not vertically. And it still requires extra markup: you need an anchor tag and a span tag to pull it off.
I consider mine to be a nice alternative, because for 75% of the people that visit the site, they get rounded corners on all their buttons with zero images and no extra markup at all. But the other 25% still get rounded corners, with 1 (very, very small) image.
I’m not saying that the technique you linked to is bad: it looks very clean and well put together! It’s a different solution for a different problem. :)
On April 23, 2010
10:28AM
Vel said:
What I wanted to say, is that I wont use jquery for something that can be done with css only, but you are right that your technique is good for buttons/links, which will go on 2+ rows ;-)
On April 23, 2010
1:43PM
Top Wordpress Themes said:
Your solution looks pretty good. However, I think it is more efficient to simply create a button class using CSS. This way it is super easy to change the text. And than you can always make a new button img for it….Or at least this is how I always do it. :)
ex:
.btn{ display: block; width: 150px; height: 50px; line-height: 50px; background; image(btn.png); text-align: center; padding: 0px 5px; text-shadow: 0px 1px #000; color: #FFF;}
Click Here
On April 23, 2010
1:44PM
WPExplorer said:
Oh yea, I forgot the div’s wont show up. Haha
On April 23, 2010
2:08PM
Rob Glazebrook said:
Perhaps I don’t understand what you’re getting at, WPExplorer… my solution also uses a single class of .button. At least, it does for everything not-IE.
It looks like your one-class-fits-all idea would work fine as long as you don’t need buttons of different sizes, which is sort of my entire point. Let’s say you have one button that says “Go” and another that says “Click Here to Access Your Free Content”, and you want to use the same button class for each. Now you’re stuck either making your button absurdly huge for “Go” or editing your button text on the longer one to fit your background image width.
My whole goal was to create something that allowed for massive button-size flexibility, that offered rounded corners, that worked cross-browser, and that kept my source clean.
On April 25, 2010
10:28AM
shin said:
I checked it with IE7, it does not show rounded corners on the top right and bottom right. Demo on IE6 does not work either.
On April 27, 2010
11:47AM
Rob Glazebrook said:
Thanks for pointing that out, Shin. I’ve added a tiny hack to the CSS to account for IE7′s problems. I’d forgotten that IE7 doesn’t play well with inline-block. Luckily, there’s a two-line workaround!
I don’t have a copy of IE6 installed here. Can anyone test the demo against IE6 and let me know of any problems?
On April 27, 2010
4:13PM
Francis Adu-Gyamfi said:
Even simpler solution for IE, which should help complete your solution without the need for any javascript at all.
http://aext.net/2010/04/css3-ie-support/
On April 27, 2010
4:19PM
Rob Glazebrook said:
Excellent find, Francis! Thanks for sharing. I’m going to download this and play around.
On April 28, 2010
2:36PM
Deluxe Blog Tips said:
If use jQuery, I would like to use a plugin to make rounded corners without images. This’s better because we don’t have to concern about PNG fix for IE6. Btw, your solution is also a good one.
On May 04, 2010
6:19PM
kirolos hany said:
this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
copy of this lesson on my here http://www.learnanyway.blogspot.com
On May 13, 2010
4:33PM
Todd J. List said:
I just found your site today, and it now has the #2 spot in my list of CSS resources (an A-Z list of all the CSS properties is first). You cut a lot of time out of my learning curve.
Thank you.
As for IE users, I say give them the sharp corner if they can’t take a radius. It’s still better than a sharp stick in the eye. ;) Ow.
On June 01, 2010
1:58PM
Oli said:
IE6 PNG fix is NOT compatible with CSS background positioning.
On June 17, 2010
12:33PM
madhu said:
really a nice stuff for the beginners, thanks very much for the very good posts on CSS
On June 29, 2010
11:56PM
Damar said:
a very good innovation ^_^ nice
On July 03, 2010
10:34PM
Ahmad said:
Wow ,ive found at last.thanks for sharing
On July 08, 2010
11:43PM
damu said:
Just happily subscribed to your feed. Good articles with gr8 site.
On July 11, 2010
10:50AM
rehabilitasyon said:
Hi, I’m beginning to learn css program. Write your thank you letter will help me a lot of work.
On July 16, 2010
9:37AM
Javier murcia said:
Nice article.I have to work with this tutorial
On August 10, 2010
3:09AM
dhanasekaran said:
your codes will not work in IE..kindly check and update to us..
On October 09, 2010
3:34AM
Chris said:
I use the same thing, but don’t rely on images, I use http://css3pie.com/ to achieve rounded corners, graident and drop shadow. Works great with ie 6-8 and for the most part requires no extra mark up to make IE play nice…
On November 18, 2010
9:32AM
Brett Widmann said:
This is a really helpful article. I like all the examples and code sets you give. Thanks for sharing.
On December 10, 2010
3:23AM
dave said:
Great work, bookmarked!
On January 31, 2011
4:44AM
Plippie said:
Why not use CSS3Pie ?
http://css3pie.com/
On February 03, 2011
12:56PM
Cgbaran said:
Great tutorial thanks
On February 08, 2011
8:39PM
dpm said:
Has anyone actually tested this in IE6?
It seems like a large fail from what I see….
On April 08, 2011
7:58AM
Bughy said:
This is great Rob. It works great on some versions of IE!
@dpm : I test it, and not working good. But serios now…how many people do you think they still use IE6?? It’s old.
One again: Nice JOB Rob!!!
On July 14, 2011
8:25AM
Narendran said:
But the rounded corner for the button is not working in IE8… Hv a look on it,& get back me.
Add ie.htc file for this
Awaiting with regards,
Narendran,
9487693560,
Tweet me @MyNaren89.
On September 11, 2011
4:41PM
Maciej Egermeier said:
There is a problem with this buttons on IE. If you turn on overflow:scroll on DIV where buttons are placed, DIV is scrolling content but buttons are in the same position :/