Rounded corners are one of the most sought-after graphical elements on the web. Hence we have a myriad of implementation with more or less bloated code. The reason is that you need four hooks to attach the four images needed for flexible boxes. With typical box markup of header plus paragraphs/lists, it can be hard to find appropriate elements, especially with outdated and buggy browser implementations.
Once you do away with browser constraints and develop for the best in the field, all the markup is 100% semantic.
<div class="hifi"> <h2>Nice box<a name="anch2">with anchor</a></h2> <p>And few...</p> <p>paragraphs. </p> </div>
div defines the box, h2 defines the header, p defines content and a defines fast-access URL point. Semantic, flexible and good looking. What else to ask for? Apart from browser support, nothing.
CSS is little more than just basics. The background of the whole box is bottom-right corner:
.hifi {
background: url(hifi/b-r.gif) no-repeat bottom right;
}
Header is the top-left hook. Pay attention that all the following properties are needed. Margin is removed, padding needs to leave some space for the curves and glow. Position is needed so we can precisely position the top-right image while overflow and line-height are there to (hopefully) avoid possible browser surprises.
.hifi h2 {
background: url(hifi/t-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
line-height: 1;
position: relative;
overflow: hidden;
}
Then comes the top-right corner, for which the anchor is used, with rules that make it fit nicely.
.hifi h2 a[name] {
background: url(hifi/t-r.gif) no-repeat top right;
display: block;
position: absolute;
top: 0;
right: 0;
width: 30px;
min-height: 3.5em;
}
Bottom-left corner is applied to the last element in the box, in my case last paragraph:
.hifi p:last-child {
background: url(hifi/b-l.gif) no-repeat bottom left;
padding-bottom: 31px;
}
But one thing is missing – the right edge is not “closed”. To avoid the need for one more image, I use the bottom-left corner image again, but this time aligned to the top-left – this works great as long as you make sure that this image is at least 2x higher then largest assumed paragraph width.
.hifi p {
background: url(hifi/b-l.gif) no-repeat top left;
margin: 0;
padding: 0.5em 30px;
}
And there it is. Nice and simple. Before the end, here are the four images used to make this example work.
- Top-left:
- Top-right:
- Bottom-left:
- Bottom-right:
This breaks in Safari! :(
Yes, Safari does not support (for now)
a[name]selector. Next big version update will most certainly add support for it.Even now it does not look too bad. In clever design, it can be used as hanging plate from one of the side edges. :)
So what browsers doesn’t it support? I’ve just jumped on Safari
to check this baby out, and the header will be flushed to the right,
could be cool if you’re wanting that effect, but.. still its :(
Does IE supports this?
Maybe it’ll be a good idea for this blogger to add a browser support
list checklist..
Rafi, I haven’t really checked where it is fully supported and where not. As I said in the post — this is forward-looking technique, thus no immediate use.
I wanted to have it archived because it came up in one of the private things I did and did not want to waste it.
For the record, it certainly fully works in Firefox 1.0 I’m using. It does not work in IE (at all), partially in Safari 1.2. Almost works in Opera 7.5.
The fact that it’s working in one or two browsers is the reason I don’t have it listed under Sparks.
Hello Aleksandar,
I drifted into your website through researching CSS for my website. It breaks apart and look bad in Firefox and just needs to new look. I respect your skills and style here. Keep up the good work.
cheers,
Kevin
ps — any recomendations for my site would be greatly appreciated!