Grow your CSS skills. Land your dream job.

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). http://www.html.it/articoli/niftycube/index.html

    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:

    Code:

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

    Code:
    .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 – http://www.marbleheadllc.net – 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

    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.

*May or may not contain any actual "CSS" or "Tricks".