Support » Themes and Templates » round corners at top of the page and bottom of the footer

  • Hello to all who stumble upon this topic!

    I need help, i can not figure this out.
    I need rounded edges at top of my page and at bottom of my footer,
    here is the image of what i want:

    I am using thesis theme and in a custom.css i have this code:

    /* CONTENT ZONE */

    .custom #content_area { background: url( images/Bottom_texture.jpg ) repeat; }

    .custom #content_area .page { background: url( images/Bottom_texture.jpg ) repeat; }

    .custom #content_box { background: #eaddcc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }

    .format_text {padding-left: 100px; padding-right:100px; padding-top:20px; }

    When i put a border-radius:5px; it round up whole content area, i want just top to be rounded. Is there some code that tells html that i only want a top to be rounded of page and bottom of footer?
    Maybe something like this: border-radius-top:5px.

Viewing 1 replies (of 1 total)
  • Hi,

    You’ve got the right idea for what you want to do – you were just a little off in your guess about the markup. If you don’t want the same radius on all corners, you can specify for each corner separately, like so:

    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;

    Note that if you’re going to do this, you have to declare the two bottom corners explicitly with a radius of zero, or they will default to the same style as the top corners!

Viewing 1 replies (of 1 total)
  • The topic ‘round corners at top of the page and bottom of the footer’ is closed to new replies.