Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS rounded corners not working

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22987
    benkenobi77
    Participant

    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

    #48724
    chazzwick
    Member

    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; }
    #48730
    benkenobi77
    Participant

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.