I just spent the last I-won’t-even-tell-you-how-many hours trying to figure out why all the google results on border-radius were not working for me. Now suddenly it works. So here is my process for the next time I try to use border-radius.
- Download the stuff from css3pie.com
- Upload files to the root. I saw references all over the place that the PIE.htc needed to be in the theme directory, that didn’t work for me. It is in the root, hence the php bloginfo(‘url’) bit in the next bullet.
- Put this code in the header.php. Replace the elements with yours #whatever or .whatever. Now here is the thing, there was an indent before #home1 and it was keeping #home1 from getting the rounded corner, even though the rest of them were working.
-
<code><style type="text/css"> #home1, #home2, #home3, #home4, #home4 .widget, #home5 .widget, #home6 .widget, #home5, #home6, #supplementary.two { behavior:url(<?php bloginfo('url'); ?>/PIE.htc); }</code> </style>
-
- Put this in your stylesheet, change the px amount and background to whatever you want:
background: #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
Seems crazy that the last I-won’t-even-tell-you-how-many-hours comes down to 4 bullet points, but such is the web.
)
