Template talk:Border-radius

Usage

This template is for making round corners to tables and such in a way that is compatible with all the browsers that support them, which at the moment are: Firefox (and other Gecko-based browsers), Safari and Chrome (and other Webkit-based browsers), Konqueror (and other KHTML-based browsers) and Opera (though only older versions as they seem to have removed support for it).

To get those pretty corners, just use this template in the style attribute of the thing you want rounded instead of -*-border-radius:amount.

This box was created with the following code:

<div style="background: black; color: grey; padding: 1px 4px; {{border-radius|8px}}">
Here be contents...
</div>

For any of you CSS gurus out there who want to use the more advanced features of what border-radius can do, please be aware that this template is only for the most simple functionality of border-radius, and doesn't work if you try to specify an elliptical border-radius or use different radii for different corners, simply because of the differences between how the various browsers handle that functionality. Of course, you are still able to specify those attributes and values yourselves, should you so desire, but you would need to do so without the use of this template.