Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Rounding Corners with JavaScript

Problem

You want to include rounded corners on elements without the hassle of introducing new markup or images manually.

Solution

Use the Nifty Corners Cube code by Alessandro Fulciniti.

First download the components of the Nifty Corners Cube solution, which include one CSS and one JavaScript file, from http://www.html.it/articoli/niftycube/index.html.

Upload both the JavaScript and CSS files associated with the Nifty Corners Cube solution. Then link the JavaScript to the web page by using the src attribute in the script element:

<script type="text/javascript" src="/_assets/js/niftycube.js"></script>

Note

You won’t link directly to the CSS file, as the JavaScript file does that.

Next, modify the markup that will have rounded corners by giving it a unique value in the id attribute:

<div id="box">
<h2>Marquee selectus</h2>
<p>...<p>
</div>

Then make a separate JavaScript call to the browser indicating which element gets the rounded corners, and define the size of the rounded corners, as shown in Figure 4-41:

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
 window.onload=function() {
  Nifty("div#box","big");
}
</script>
The rounded corners (left) and the default rendering (right)

Figure 4-41. The rounded corners (left) and the default rendering (right)

Discussion

Since it’s almost a completely worry-free method for creating rounded corners, the Nifty Corners Cube solution has been called more of a tool than a technique.

Note

This Solution is based on JavaScript. If the user does not have JavaScript in his browser or it is turned off, the rounded corners do not appear.

Different colors

Colors are detected automatically. The JavaScript automatically changes the colors to match the background color within the element as well as its parent element (usually the body of the web page). This means a developer only has to worry about setting which element gets the curves and the size.

Different sizes

Four keyword sizes are written into the Nifty Corners Cube JavaScript: none, small, normal (default), and big. small is equal to the value of 2 pixels, normal is 5 pixels, and big is 10 pixels.

For example, to adjust the corners so that they are small, the JavaScript call would look like this:

<script type="text/javascript">
 window.onload=function() {
  Nifty("div#box","small");
}
</script>

Different elements

Nifty Corners Cube accepts numerous selectors, making it easier to dictate which elements should receive rounded corners, as shown in Table 4-3.

Table 4-3. Selectors understood by Nifty Corners Cube JavaScript

Selector

Example

Type

"div"

"h3"

id

"div#box"

"h3#main"

class

"div.box"

"h3.box"

Descendant with id

"div#box h3"

"h3#main div"

Descendant with class

"div.box h3"

"h3.main div"

Grouping

"div, h3"

"div, h3.main div, p"

For example, to apply rounded corners to multiple elements, the JavaScript function might look like the following:

<script type="text/javascript">
 window.onload=function() {
  Nifty("div, h3.main div, p","small");
}
</script>

Specific corners

The Nifty Corners Cube solution also makes allowances that developers might not want to apply rounded edges to all the corners. Table 4-4 lists the keywords that allow developers to single out which corner or corners to round.

Table 4-4. Keywords understood by Nifty Corners Cube JavaScript

Keyword

Meaning

tl

Top-left corner

tr

Top-right corner

bl

Bottom-left corner

br

Bottom-right corner

top

Upper corners

bottom

Lower corners

left

Left corners

right

Right corners

all (default)

All the corners

For example, to apply rounded corners to the top corners of multiple elements within a web page, the JavaScript function might look like the following:

<script type="text/javascript">
 window.onload=function() {
  Nifty("div, h3.main div, p","small top");
}
</script>

Note

Variations of this Solution for the numerous JavaScript frameworks are available today. You can find one such solution for jQuery at http://www.malsup.com/jquery/corner/.

See Also

http://www.html.it/articoli/niftycube/index.html for more information about Nifty Corners Cube

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required