ボックスを角丸にするNifty Corners-JavaScript

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.

Nifty Corners with CSS and Javascript So, the next step was to provide the unnecessary elements with javascript and DOM making some functions to get rounded corners on almost every element on the page without adding a single line of extra HTML or CSS apart from the basic rules we saw. Let's have a look at the example with Nifty Corners. As you can see from the source code, no extra markup is in it. The solution is a combination of CSS and Javascript. The technique is made up of four essential parts:

CSS file for the screen
CSS file for the print
Javascript library to get Nifty Corners
the javascript calls to round the elements you want
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

CUTPLAZA】【CUTPLAZA TERMINAL