The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rounded corners without images and lots of CSS markup

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #23053

    Nifty Corners Cube: niftycube.js

    Watching Chris Coyiers WordPress video series I saw how rounded corners was used for Mozilla and Safari web browsers using the CSS-styles -moz-border-radius and -webkit-border-radius, but Internet Explorer only showed the square box with no round corners.

    I wanted to have rounded corners for my left and right sidebar boxes without having to use images or lots of CSS code. I was reading "The CSS Anthology" by Rachel Andrew looking for ideas and found the section about rounded corners using Nifty Corners Cube (page 371).

    Very simple to set up in WordPress if you are running your own blog. Download the file, unzip, and install: niftycube.js and niftyCorners.css to your WordPress theme file.

    In your header.php link the Javascript file to the <head> of your document:


    I am using Chris Coyiers .widget style in the CSS:

    .widget { background: #CCCCCC; width: 190px; margin: 0 0 15px 0; }
    .widget .inside { padding: 10px; }

    NOTE: Padding inside your box must be specified in pixels. Any other unit will not render the corners properly.

    Here is my practice blog URL – – notice the rounded corners on the right and left sidebar boxes. I tested this out in Internet Explorer, FireFox, Safari, and Opera. :D


    @Chris – you are right – keeping it light-weight is the best, now if we can get IE to catch up in that area. :D

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.