views:

220

answers:

4

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!!

+2  A: 

jquery corner plugin is the best plugin to create a rounded corner, and Dropshadow is good one drop shadow effect. Its literally tow lines of code(ignoring the plugin code) :)

Teja Kantamneni
Why use JS when CSS can do the job? Sure IE can't do it but neither can Lynx and no one sweats that. Too often everyone just throws jQuery at every simple solution.
Rob
Well, I think that jQuery can still be used as a fall back, no? Except, thanks to Hristo pointing out PIE, I can just use that! :)
BOSS
@Rob In the question he clearly asked for a jQuery plugin as a fallback. The plugins which I suggested will use css3 if the browsers are capable otherwise use div's to do the job. Also jQuery really make things simple.
Teja Kantamneni
+1  A: 

http://www.cssplay.co.uk/boxes/four_cornered.html

http://www.cssplay.co.uk/boxes/ has the rounded corners, dropshadow and more. 100% CSS with no use of JS, and works in IE.

Ken
+3  A: 

CSS3 can do all that you need, and most browsers support it except IE8. (The next version of Internet Explorer will support these features though.)

Visit css3.info for more information.

BlueCode
+1  A: 

Check this out: http://css3pie.com/

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

It is easy to use and integrate, it allows you to use CSS3 features like border-radius, shadow, gradient backgrounds, etc... and best of all... it is compatible with IE!

I hope this helps!

Hristo
That's AWESOME!!! Thanks thanks thanks!
BOSS
You're welcome :) So does that mean this answered your question? If so, please check my answer :)
Hristo