Making my CSS layout have rounded corners

Is there an easy way to modify my CSS layout to have rounded corners on the 4 corners of my main text area?

http://www.grammarperfection.com/index.html

#wrapper {
width: 824px;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-width: 1px;
border-right-color: #0000FF;
background-image: url(../Images/background-correction.gif);
background-repeat: repeat-y;
margin: auto;
}
#navigation {
height: 20px;
text-align: center;
margin-bottom: 15px;
}
#wrapper #bodyArea #left {
width: 120px;
float: left;
background-color: #AFEFF1;
border-top-width: 1px;
border-top-style: none;
border-top-color: #0000FF;
display: block;
border-right-width: 1px;
border-right-style: none;
border-right-color: #0000FF;
padding-top: 0px;
padding-right: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border-left-style: none;
}
#wrapper #bodyArea {
border-left-width: 1px;
border-left-style: none;
border-left-color: #999999;
background-position: center;
width: 824px;
clear: both;
}

#wrapper #bodyArea #right {
width: 702px;
float: right;
padding: 0px;
border-top-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #0000FF;
text-align: justify;
border-left-width: 1px;
border-left-color: #0000FF;
clear: right;
margin-top: 0px;
}

#wrapper #bodyArea #footer {
height: 27px;
clear: both;
border-right-style: none;
border-bottom-style: none;
border-bottom-width: 1px;
border-bottom-color: #999999;
text-align: center;
background-position: center;
border-top-width: 1px;
border-top-style: none;
border-top-color: #999999;
border-left-style: none;
border-right-width: 1px;
border-right-color: #94E4E8;
background-color: #AFEFF1;
vertical-align: middle;
}

Are you trying to do it without images or is either way OK?

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Well, I tried following steps on different sites about doing it with CSS and no images and got totally lost. I've found that the steps often show how to create a text box from scratch and incorporate the rounded corners, but I already have the ones I want (text areas) and they are floating (not sure if that makes a difference).

Also, I have 3 different boxes that all need separate corners.

The left text area only needs the upper left corner rounded. The right text area only needs the upper right corner rounded and the footer needs both bottom corners rounded. http://www.grammarperfection.com/Yikes.

I really don't have a preference either way but would like whichever way is most compatible with browsers. Will image corners mess up the margins of my text? My text goes pretty close to the ends of the text areas.

Try these sites (http://exitfegs.co.uk/Sources.html)

Third column from the left near the top.

Frank

You can use images with absolute positioning