Grow your CSS skills. Land your dream job.

rounded corners not working

  • # July 27, 2008 at 12:19 am

    I went off of example #2 in the video tutorial to do a semi-transparent box with rounded corners but all of my corners are in the top left and overlapping – can’t figure out what the hell i did wrong.

    CSS

    Code:
    .text_box {position: relative; margin: 0; width: 200px; background: url(../images/trans_box.png) 0 0 repeat; border: 1px solid black;}
    .tl {position: absolute; width: 13px; height: 13px; background: url(../images/box_tl.png); top: -1px; left: -1px;}
    .tr {position: absolute; width: 13px; height: 13px; background: url(../images/box_tr.png); top: -1px; left: -1px;}
    .bl {position: absolute; width: 13px; height: 13px; background: url(../images/box_bl.png); top: -1px; left: -1px;}
    .br {position: absolute; width: 13px; height: 13px; background: url(../images/box_br.png); top: -1px; left: -1px;}
    .inside {padding: 20px;}

    HTML:

    Code:

    content here

    # July 27, 2008 at 7:58 am

    youve given tr, tl, br & bl all an absolute position of top: -1px; left: -1px;.

    try this instead:

    Code:
    .tr {top: -1px; right: -1px;. }
    .tl {top: -1px; left: -1px; }
    .br {bottom: -1px; right: -1px; }
    .bl {bottom: -1px; left: -1px; }
    # July 27, 2008 at 1:00 pm

    i’m an idiot – didn’t see that. thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".