Category Archives: Web design

Rounded corners, tidy code

This technique is no longer needed – we have HTML5 and CSS3 and support for border-radius now.

There are many techniques for putting rounded corners on a box. All of them require some deviation from the ideal of clean, semantic (X)HTML for structure, CSS for presentation and scripting for behaviour.

The technique of placing corner images directly in a page goes against the idea that CSS should be used for presentation and reduces flexibility (no style-switching). Techniques that use JavaScript seem like overkill to me, and the resulting page code is often the same anyway.

Best let CSS handle it. The cleanest and most concise way I have found uses four <div> elements to call the corner images from a stylesheet.

The code for the page.

<div id="container">
<div class="nw"><!-- --><div class="ne"><!-- --></div></div>
<div class="sw"><!-- --><div class="se"><!-- --></div></div>

The code for the stylesheet.

.nw, .ne, .sw, .se { height: 15px; }
.nw { background: url(nw.gif) no-repeat top left; }
.ne { background: url(ne.gif) no-repeat top right; }
.sw { background: url(sw.gif) no-repeat bottom left; }
.se { background: url(se.gif) no-repeat bottom right; }

Pretty straightforward. Using empty <div> elements for presentation like this looks a bit messy but I do not think it is incorrect. The comments are added because some browsers will add default dimensions to an empty <div>. The <div> elements are nested so that there is no need to declare a width on the classes.

CSV 10-week web design course

I will be delivering a 10-week web design course at the CSV Media Clubhouse in Brighton starting February 28th. The course costs £200 and will run on Wednesday evenings from 6pm to 9pm.

It is an opportunity to design, build and publish your own website and places are still available. The course will focus on creating a clean, standards-compliant site using stylesheets for presentation. A blog or simple e-commerce facility may be included as part of your site if you wish.

We will be working mainly in Dreamweaver and Photoshop. No previous experience of these programs is necessary, but you should already have reasonable IT skills to get the most out of the course.

Contact Erin or Alex at CSV on 01273-720894 or at for more information.