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:
<script type=\"text/javascript\" src=\"<?php bloginfo('template_directory'); ?>/niftycube.js\"></script> <script type=\"text/javascript\"> window.onload=function(){ Nifty(\"div.widget\",\"medium\"); <!-- change this to your CSS --> } </script>
I am using Chris Coyiers .widget style in the CSS:
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
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.
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:
<script type=\"text/javascript\" src=\"<?php bloginfo('template_directory'); ?>/niftycube.js\"></script><script type=\"text/javascript\">
window.onload=function(){
Nifty(\"div.widget\",\"medium\"); <!-- change this to your CSS -->
}
</script>
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 - 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