Button with rounded corners without CSS3

**Wisdom** · 08-18-2010, 12:54 PM

Can anybody tell me how can I make a button with rounded corners without unsing CSS3 codes.

Thank you

**Beverleyh** · 08-18-2010, 01:02 PM

I think for a menu button the simplest thing would be to use an image, otherwise you're creating a lot of unnecessary markup and CSS.

**Wisdom** · 08-18-2010, 02:17 PM

I know, but the image must somehow extend with the width of the button.

**traq** · 08-18-2010, 02:40 PM

http://jquery.malsup.com/corner/

^ uses css3 in browsers that support it (most besides IE; saves lots of time) and builds multiple <div>s to create the corners otherwise. The odd (non-round) corners are all javascript.

There are, of course, plenty of methods for creating extra <div>s or <span>s with rounded-corner images, but the jQuery plugin is much simpler and less prone to problems.

**Wisdom** · 08-18-2010, 03:18 PM

Thank you, but I really don't know to work with jquery

If there isn't another way

**jscheuer1** · 08-18-2010, 03:38 PM

To do this with the minimum amount of css, and all just common css, you would need two or three images. That's for a button that's always going to be the same height.

The images:

left side
right side
possibly middle (if the button has a top to bottom gradient or some other workable pattern/texture and/or top-bottom edges to it)

So you have three divs float left in a container div. The first has the background-image for the left side, no repeat. The second has either the background image for the middle, or a solid color background, it's foreground is the text of the button. If using an image, the background is repeat-x. The third has the background image for the right side, no repeat. The height of all three divs is the height of these images, which of course should be uniform. The width of the 1st and 3rd are the width of their respective images, best this also be uniform. The width of the center is not set, the text and left/right padding (if any) will determine that.

A sprite image may be used for the left and right side. But that's a fine point and would require a little more css.

**traq** · 08-18-2010, 05:13 PM

jQuery is actually pretty easy.

HTML Code:

<!doctype html>
<head>
<!--include jQuery library (hotlinking is O.K.!)-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--include corner() plugin-->
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<!--
write a document.ready function that tells which elements to put corners on.
the indented line (" $("#button").corner(); ") is the one you'll change for you purposes.
" .button " means "element with class=button"
-->
<script>
$(document).ready(function(){
	$(".button").corner();
});
</script>
</head>
<body>
	<!--make sure everything that should have corners 
	has the same class ( in this case, "button" )-->
	<div class="button">button text</div>
</body>
</html>

**Beverleyh** · 08-19-2010, 09:31 AM

ooh, I like those jQuery corners - something else for me to play with! Thanks traq

Wisdom, jQuery may sound scary but it really will open many doors for you as far as web enhancement goes. Start small and just play with very small functions until you get the hang of it - its very easy and there are planty of tutorials on the web.

**traq** · 08-19-2010, 01:23 PM

actually, the best thing about those corners is that it only draws all those extra <div>s when it has to - if the browser supports it, it just applies the border-radius or vendor equivalent (for round corners; obviously the weird shapes are all markup-heavy).