Posts Tagged ‘nablopomo’

The contents of this post are a few years old now and I can’t recommend them as best practice.

Today I decided to try and build rounded corners on a button that would work in both CSS 3 compliant browsers (Gecko and WebKit based browsers, i.e. Firefox, Camino, Safari, Chrome, etc.) and also in IE and Opera.

The HTML

<input type="submit" value="Go" class="button-rounded"/>

Nice and clean.

The CSS

.button-rounded {
        border: 2px solid #fff;
        padding: 0 2px;
        background-color: #2e4c37;
        color: #fff;
        font-weight: bold;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
}

This is enough to do the trick in the known good browsers and in any unknown CSS 3 compliant browsers. (This part of the CSS 3 spec, whilst still not finalised, is unlikely to change.)

More CSS

span.corners {position: relative;}
span.corners i {position: absolute; width: 4px; height: 4px; background: url(corners.png) no-repeat;}
span.corners i.tl {top: 0; left: 0; background-position: 0 0;}
span.corners ispan.corners ispan.corners i.tr {top: 0; right: 0;  background-position: -4px 0;}
.bl {bottom: 0; left: 0; background-position: 0 -4px;}
.br {bottom: 0; right: 0; background-position: -4px -4px;}

Yet more CSS for IE (use a conditional comment or your hack of choice)

span.corners i.tl, span.corners i.tr {top: 1px;}
span.corners i.bl, span.corners i.br {bottom: 1px;}

(There’s a one pixel difference betwen the way Opera and IE draw the button, hence the branched CSS. This may not always be the case, depending on the CSS styles you use for the border but with a 2px wide border with a 4px corner radius it was the case.)

[Update] It seems that IE8 differs from IE7 in this respect. I’ll revisit this article when IE8 leaves beta.

The graphic

, a bit small, here it is ×4 . That’s all four corners in one graphic, for use as CSS Sprites in the above CSS code.

But where are these elements that this extra CSS references? They get added by JavaScript, in this case using the jQuery library.

The JavaScript

if(($.browser.msie && $.browser.version == '7.0') || $.browser.opera) {
        $('.button-rounded').wrap('<span class="corners">>/span>');
        $('span.corners').append('<i class="tl"></i><i class="tr"></i><i class="bl"></i><i class="br"></i>');
};

Why <i>? Because it uses the least code. If you like you can use <span> instead.

Why browser sniff? Because we don’t want to write extra code into the page for browsers that don’t need it and it’s hard to include IE and Opera but exclude FF and Safari by other means.

Remember that any browser excluded from the JavaScript and incapable of using CSS 3 will get a button with square corners. We are not excluding anyone from functionality, nor from the general design – just from one small detail.

The result

So Firefox and Safari get rounded corners via CSS. IE7 and Opera get some extra code which positions graphics over the corners of the buttons.

Still to do

IE6 has some problems with using the right and bottom CSS properties. Hence for the moment I exclude it from the JavaScript. This is what I hope to resolve in part 2.

There’s also a potential future-proofing issue – when Opera and IE start supporting border-radius this code will position the graphics over the rounded corners, which may or may not work depending on how closely their rounded corners match the ones Gecko draws (the graphic was produced from a screen shot of the corners in Firefox).

Part 2, in a few days.