The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Rounded corners without images and lots of CSS markup

  • # August 9, 2008 at 9:34 am

    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

    # August 10, 2008 at 8:56 pm

    This reply has been reported for inappropriate content.

    Cool =) I do like these JavaScript techniques for rounded corners as well, if you are in a situation where they are vital to the design. For my site, I was happy with using the browser proprietary CSS attributes (e.g. -webkit-border-radius ) just because I felt like the design kinda worked either way and so may as well keep it lightweight.

    # August 11, 2008 at 3:50 am

    @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 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed