...

View Full Version : Making my CSS layout have rounded corners



SeanWoods
05-01-2009, 03:12 AM
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;
}

ajhauser
05-01-2009, 05:38 AM
Are you trying to do it without images or is either way OK?

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

SeanWoods
05-01-2009, 01:17 PM
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.

effpeetee
05-01-2009, 01:27 PM
Try these sites (http://exitfegs.co.uk/Sources.html)

Third column from the left near the top.

Frank

codedpsd
05-02-2009, 12:04 PM
You can use images with absolute positioning



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum