Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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;
    }

  • #2
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    Are you trying to do it without images or is either way OK?

    http://www.cssjuice.com/25-rounded-c...ques-with-css/

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try these sites

    Third column from the left near the top.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    May 2009
    Location
    New York City
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can use images with absolute positioning


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •