OK, I have my site going pretty well here: http://www.marioplanet.com
But I've realized that if the end-user's monitor is big enough to display the animation on the sides of the pages (which mostly every desktop's monitor and some laptop's can) than I believe my main content would look better with a little red / black border, and some rounded corners, and perhaps even a dropshadow.
Now, I am looking for the easiest way to implement both the border and the rounded corners, and hopefully the dropshadow, but that's not as necessary, with the smallest amount of code.
If I can make it work with just CSS for most browsers except for IE and fallback to a jQuery / JS plugin for IE, that's great too. Or even leave it out of IE completely, but that's not too nice! :)
UPDATE:
OK, I can get it to apply to my header <div>
as you can see live right now, but when I try to apply it to the overall wrappter <div>
, I get nothing. It may be because I need to have the width
and height
properties specified in my CSS first.
Thanks!
UPDATE UPDATE:
I found the easiest way to do the borders was by using the following CSS3 selectors:
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Which all work like a charm!!