/* General Styles. These are not important as far the actual corners are concerned. */

body {
    background-color: #fff;
    font-size: 90%;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    text-align: center;
}

.info { text-align: center; margin-top: 2em; font-size: 80%; }

div { text-align: left; }

p img { display: block; margin: 1em auto; }


/* The actual corners. */

div.boxhead h2 { background: url("rounded.png") top left no-repeat; } 

.boxhead { background: url("rounded.png") top right no-repeat; } 

.boxbody { background: url("rounded.png") bottom right no-repeat; } 

.rounded { 
   background: url("rounded.png") bottom left no-repeat;
   width: 40%; /* could be whatever you want, as long as your image is large enough */ 
}


/* The anti-aliased corners */

#antialiased .boxhead h2 { background: url("rounded2.png") top left no-repeat; } 

#antialiased .boxhead { background: url("rounded2.png") top right no-repeat; } 

#antialiased .boxbody { background: url("rounded2.png") bottom right no-repeat; } 

.rounded-aa { 
   background: url("rounded2.png") bottom left no-repeat;
   width: 40%; /* could be whatever you want, as long as your image is large enough */ 
}

/* Just some more styling. */

.boxheaders { 
   padding: .4em 0 0 .6em;
   border-bottom: 1px dotted white;
}

.boxtext { padding: 0 1em 1em 1em; }

.centered { margin: 0 auto 1em auto; }

.green { background-color: #a3bf91; }