Broader Border Corners

17 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Mats Lindblad

    Couldn’t we make it more generic and modern-browser-friendly by using #content:first-child instead?

    I haven’t tried it but it seems a bit easier.

    Or .one:first-child in the thick-border-example, which I really liked!

    Nice article, seemed so simple when you explained it.

  2. Mats Lindblad

    Yea you’re right, my bad.

    I always have a problem remembering what first-child refers to, if it’s the first occurence of #content or if it’s the first element inside of #content.

    Anyway, wouldn’t it be more generic if we used first-child instead?

  3. agentgray

    Great writeup!

    I have one minor problem. I’m using this in a sidebar on the right and it displays perfectly on the top with Firefox.

    However, in IE it drops to the bottom of the page. I think this has to do with the position attribute. Is there something I can do to make this go to the top?

  4. Richard Davies

    This article is a good primer on the basic techniques used to make rounded corners with CSS, but as alluded to in the article and in some of the previous comments, there is still room for a lot of improvements.

    An ideal solution would be able to style all four corners of the box without requiring extra div or span tags. (Remember that we should be trying to maintain lean, semantic markup here…) Also, it would be nice to be able to accomplish this without JavaScript, but until the major browsers support the CSS3 border-radius property, JavaScript is probably going to be required. (Firefox/Mozilla browsers already support the roughly equivalent -moz-border-radius property.)

    In the meantime, if you’re looking for a much better (and more complete) solution than this article provides, check out the following resources:

    Nifty Corners

    Transparent custom corners and borders

    MochiKit Rounded Corners

    These should be enough to get you going. If I’ve left out any other good ones, let me know.

  5. Patrick Griffiths

    They’re not much better and more complete though, they’re completely different. This technique is basic, and really specific – to x-pixel wide borders – rather than rounded corners in general.

    To address some of the previous points – much of the span / div scaffolding is necessary because of the current state of browser (as in IE) capabilities. Ideally we could use first-child, or multiple background images in the same box, but it just aint practical at the moment.

  6. cowboy_k

    One minor quibble: my default background color is off-white, so the white background of the corner .gif is a little jarring. Adding a matching background color to the base #content would probably do the trick, though. Nicely done.

Impress us

Be friendly / use Textile