We’re going to show you how to make expandable rounded corners with CSS. Using our method will require only 6 HTML tags and one background image (yes, ONE image for all 4 corners!). It also validates, works across all the major browsers, and looks great in your source code.
Download the full rounded corners tutorial below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip
Making the corner images
One downside of most of the other methods for rounded corners is that you require multiple background images, one for each corner. With our method you only need one. If you take a look at corners.gif in the source files you’ll see how you need to set up your image. The basic premise is to create a full circle, chop it up into 4 segments and put each segment in the opposite corner to what it started in (top left would go into the bottom right, etc).
The last thing to do is put a white (or other colour) background behind the segments and then save the image.
HTML Code
<ul class=”roundedCornerWrapper”>
<li class=”top”>
<span></span>
</li>
<li class=”middle”>
Heart Internet
</li>
<li class=”bottom”>
<span></span>
</li>
</ul>
Keeping the HTML short and valid is important for many reasons, so for the rounded corners we’re going to use an unordered list with some span elements. There may be shorter methods, but this is quick, easy, and validates.
The full tutorial including HTML, CSS and Graphics can be download via the link below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip
Tags: css, html, Web Design
Great tip…much easier than using 4 divs with different background images as I have been doing….thanks !
When I tried to download this I was unable to decompress the archive, I got a message saying the folder was emplty (Windows Vista).
Also I don’t think that this is a great idea. HTML are supposed to be related to the meaning of content, the ul tag is supposed to be an unordered list. This breaks that relation. It is like using tables for layout, which is generally considered to be a bad idea for similar reasons.
Hi Fiona,
Thanks for your comments.
I’ve recreated the .zip file in Vista itself and have re-uploaded it to the server so you should be able to download & unarchive it fine now.
With regards to the use of the list item within this guide, < li > tags are allowed to contain other html elements, and it’s fine to do so. What you must remember is that you need to keep a logical limit to how much content you are showing, for instance you wouldn’t want to use paragraphs of text with this method, because as you say, it defeats the point of a list item.
As long as you are using this method to display small amounts of content then there morally won’t be an issue – also if you are using this method for multiple boxes – then it’s good practice that each container should follow a logical sequence.
Many thanks.