There is a time just around the corner (so to speak), when we will take a shameful glance at how we used to fudge, hack and force rounded corners into our web pages. That time is not today. So I’m going to show you how I fudge corners, using a bit of jQuery, some CSS and a .gif image.
Creating a rounded corner using pure CSS is covered in detail here. However IMO using rules that are specific to individual browsers, isn’t a real step forward, and sets a dangerous precedent, (imagine if Microsoft started to introduce CSS for just Internet Explorer), so whilst I appreciate the effort Mozilla and the guys behind Webkit (the engine behind Safari and Chrome) have gone to, I’m going to wait for an accepted standard rule before I start using CSS to style my corners.
In the mean time, Here’s an Example What We’re Going to Make:
three boxes with different background colors, and different sizes, all with neat little rounded corners, and here’s how to do it:
Step 1 – Create Your Corner
- Open Fireworks, or your favourite graphic app
- Create a new file, 10px x 10px.
- Make a circle 10px x 10px, and give it a hard stroke of 1px in #ccc (or whatever colour you want your border to be), do not fill the circle – leave it empty.
- Next, fill the background of your image with the background colour of your page – Do not fill the space inside the circle
- Finally export your image as a gif called corner.gif (or whatever you prefer), making sure the transparency is set to ‘index’.
Step 2 – the CSS
So that jQuery can select all the elements on the page that we want to give rounded corners to, we’re going to create a class called ‘corners’, and give it the CSS the property:
.corners {
position:relative;
}
Giving it relative position will allow us to absolutely position the corners inside the element as oppose to inside the document.
Next, create rules for the divs that will become the corners, I’ve used abbreviations of top Left = tl etc:
.tl, .tr, .br, .bl {
position:absolute;
width:5px;
height:5px;
/* ! the width & height is half the width of our circle gif,
showing only a quarter of the image */
overflow:hidden; /* ! Important for IE6 */
background-image:url(../yourimagefolder/corner.gif);
}
/* ! position each corner, and its background image */
.tl {top:-1px;left:-1px;background-position:0 0 ;}
.tr {top:-1px;right:-1px;background-position:-5px 0;}
.br {right:-1px;bottom:-1px;background-position:-5px -5px;}
.bl {left:-1px;bottom:-1px;background-position:0 -5px;}
Finally, (making sure you have linked to the jQuery library) a small amount of jQuery will assign four divs, with classes of tl, tr, br and bl to any element with a class of ‘corners’:
<script type="text/javascript">
$(document).ready(function() {
$('.corners').append('<div class="tl"></div><div class="tr">
</div><div class="br"></div><div class="bl"></div>');
});
</script>
And that’s it, until you start using CSS to childproof your corners, have fun fudging them with css & jQuery.
