Forums

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
    Posts
  • #23053
    marble
    Member

    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

    #49003
    marble
    Member

    @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.