You can see the final effect on this simple example. A few words on the use of the element. I needed an inline element to obtain the rounded corners, since it could be nested in almost every kind of tag mainting the markup valid. So the choice fell on b because it doesn't have semantical meaning and it's shorter than span, like Eric Meyer said.
The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.
Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.
The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.
Easy, isn't it? But we can do much better.
CSS file for the screen
CSS file for the print
The first three components just don't need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:
【画像を使用しないで角丸を実装するスクリプト -jQuery Corners：CUTPLAZA TERMINAL】