icon
Perfect Borders Every Time

Ok, so a few days ago, I posted about the wonders of rounded borders in CSS version 3. So I went crazy and started adding rounded borders everywhere. I really like the way it ended up looking. But then I had second thoughts. I thought about all the poor saps who wandered into my site using Internet Explorer, or Opera, or Konq, who would see the site, and not realize what they were missing out on. They would probably also wonder to themselves why my site looked so terrible. So I started on the mission of making rounded borders using images, so that everyone would see my site the same.

I actually came upon what I think was a pretty good solution. It lets me put rounded borders on whichever elements I want, while also having the option to not have rounded borders, or any borders at all, in my alternate designs.

The most aggravating part was find a good way to create an image which looked exactly how I wanted the corners to look. Then it hit me. I already had an image of how I wanted the corners to look, right on the screen in front of me. So, a little print screen and transparent png work in GIMP, and I was all set with my border images. It's important that the inner edge of the image is tranparent, so it doesn't cover up any text that is close to the border.

Now the trick was to get the images into the corners of the elements that I wanted them to appear in. The method that I'm about to outline below, just came to me. I didn't think it would work as well as it did, but turns out I got lucky this time. Let's look at a quick sample of the code used.

<div class="item_with_border">
	<div class="border_top_left"></div>
	<div class="border_top_right"></div>
	<div class="border_bottom_left"></div>
	<div class="border_bottom_right"></div>
	This is the text that is displayed
</div>

<style>
	div.item_with_border
	{
		border: 1px solid #FFF;
		postion: relative;
	}
	div.item_with_border > div.border_top_left
	{
		background-image: url(topleft.png);
		position: absolute;
		top: -1px;
		left: -1px;		
		width: 30px;
		height: 30px;
		z-index: 2;
	}
	div.item_with_border > div.border_top_right
	{
		background-image: url(topright.png);
		position: absolute;
		top: -1px;
		right: -1px;		
		width: 30px;
		height: 30px;
		z-index: 2;
	}
	div.item_with_border > div.border_bottom_left
	{
		background-image: url(bottomleft.png);
		position: absolute;
		bottom: -1px;
		left: -1px;		
		width: 30px;
		height: 30px;
		z-index: 2;
	}
	div.item_with_border > div.border_bottom_right
	{
		background-image: url(bottomright.png);
		position: absolute;
		bottom: -1px;
		right: -1px;		
		width: 30px;
		height: 30px;
		z-index: 2;
	}	
</style>

Ok, so let's look at what we have here. The outer div with the class "item_with_border" is going to have border displayed around it. It needs one div inside for each corner. it is given a position value of relative so that the items inside, when positioned with absolute, will be placed relative to this one. We also have to define what the size and colour of the border is going to be. For this one, it's a simple 1 pixel solid white border.

Each of the "corner" divs gets placed at it's respective corner by giving it a position value of absolute. This allows us to use top, bottom, left, and right to define where we want to position them, relative to their container. If you didn't use relative as the position on the container div, then they get postioned relative to the entire page, or whichever parent element is defined as relative. So, giving the top and left values of -1px places the div in the top left corner. It needs to be -1px so that it will overlap the actual border. If your border is wider, like 3px, you should use -3px as your top and left values.

The border image is displayed in the corner divs using the background-image property. Since there is nothing inside the corner divs, we need to specify the height and width. Otherwise these will be 0, and you won't see them at all. The height and width should be the same as the dimensions of the image you are using to display the corner. And lastly, we need to specify the z-index. This isn't really necessary, but I thought it was good practice, to ensure that the positioned corner divs always showed up on top of the container div. It seems to work fine without specifying the z-index.

So, that's it. Not extremely easy, but I've seen much more difficult ways of doing it. The fact that the corner divs are empty, and hence don't display at all unless you apply some css to them makes this a perfect solution. It also allows you to use the same HTML code across multiple designs, which may have different colors, border sizes, or even no borders at all. Getting the images right really was the trickiest part. Perhaps I should have gone into that more, but maybe I'll save that for another post.