This technique uses the Sliding Doors of CSS technique described by Douglas Bowman on A List Apart.

We need 4 containers or elements we can apply style to, to define the four corners we want to round. Here you see I’m using an h4 tag as my outer container and nesting inside it two spans one for the header text and one for a link or anchor point. With the inclusion of our anchor tag we now have our four elements.

<h4><span class="title">H4 Demo Title 2</span><span class="link"><a href="edit_link.htm" title="edit">Edit</a></span></h4>


<h4><span class="title">H4 Demo Title</span><span class="link"><a name="anchor">&nbsp;</a></span></h4>


The markup may seem a bit overkill in this example but I tend to always design for the future. In my original markup I wanted to allow for Graphic headers as well as edit links in my headers. But as you can see in my second example the edit link can be used as a legacy anchor. No matter how you split it up the goal here is to have semantic markup in the end not a bunch of meaningless wrapper divs. I will get into using wrapper containers in a later post.

I have created my corners in a graphical editor. I used gif’s for their transparency and browser support. The corners are transparent on the inside of the corner and have the background color of the page on the outside of the corner. Doing this allows me to style the background of the object that is being rounded with any color and not have to recreate the corner images every time I want to change the styling. Here are the images as I have made them.

Ok so now lets style it…

h4 {
background:#E3E3E3 url(corner-TL.gif) no-repeat scroll 0 0;
font-size:1.1em;
height:5ex;
position:relative;
}


I set the background color on the outer container and position the background (in this case the Top Left corner,) image to the top left and set it to no repeat. I set the position to relative so I can use absolute positioning for the rest of the corners. I also set the height here to accommodate the text so I used ex which is 1/2 em in browser calculations. see my post on calculating ems for more info. (Note: Elements when positioned absolute are removed from the document flow causing the parent containers to collapse as if they have no contents.)

h4 span.title {
background:transparent url(corner-BL.gif) no-repeat scroll 0 100%;
bottom:0;
display:block;
left:0;
padding:0 0 10px 10px;
position:absolute;
}


Here I set the Bottom left corner position in the background property and set the position to absolute with a bottom and left of zero. Its important to note that our background color is set to transparent here because all of the absolute positioned elements inside the first container sit on top and I don’t want to hide the background image of its container element. The padding is set to space in my text 10px from the left and bottom of the container. I set the display to block and any inline element so it holds its padding.

h4 span.link {
background:transparent url(corner-TR.gif) no-repeat scroll 100% 0;
display:block;
height:5ex;
padding:0 10px;
position:absolute;
right:0;
top:0;
}


Here I set the top Right corner nothing different and pad in the text 10px. I set the height to the same height we used for the container. Since this container has no content (child elements when positioned absolute are removed from the document flow causing the parent containers to collapse) we set the padding to accommodate the corner image and the height to accommodate the anchor tag.

h4 span.link a {
background:transparent url(corner-BR.gif) no-repeat scroll 100% 100%;
bottom:0;
display:block;
font-size:0.7em;
font-weight:normal;
padding:0 10px 10px 0;
position:absolute;
right:0;
}


In this last piece we set the Bottom Right corner and pad in the text from the right and bottom. I reduced the font size for the link so it does not compete with the header text. Set the padding here to 10px to accommodate the corner image and spacing in the text from the bottom and right.

The Results

H4 Demo Title 1Edit

H4 Demo Title 2