title: Easiest way to add a CSS border, dropshadow, and rounded corners for my content
body: <p>OK, I have my site going pretty well here:  <a href="http://www.marioplanet.com" rel="nofollow noreferrer">http://www.marioplanet.com</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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! :)</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>OK, I can get it to apply to my header <code>&lt;div&gt;</code> as you can see live right now, but when I try to apply it to the overall wrappter <code>&lt;div&gt;</code>, I get nothing.  It may be because I need to have the <code>width</code> and <code>height</code> properties specified in my CSS first.</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE UPDATE:</strong></p>
  
  <p>I found the easiest way to do the borders was by using the following CSS3 selectors:</p>
  
  <pre><code>border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  </code></pre>
  
  <p>Which all work like a charm!!</p>