How to create rounded corners that only the top?

Discussion in 'CSS' started by fixesign, Mar 28, 2011.

  1. #1
    I just want a round at the top of the course, but if I use the browser "Google Chrome" all the corners become rounded. What's the solution, friends?
    This is my CSS:

    .top_menu li a{
    color:#FFFFFF;
    text-decoration:none;
    display:block;
    padding:5px 20px 5px 20px;
    background:#076cbe;
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-radius:5px;
    }
     
    fixesign, Mar 28, 2011 IP
  2. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think chrome uses the -webkit but I', not sure.

    This will round the top corners by 5 px and keep the bottom corners normal:

    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
     
    style0, Mar 28, 2011 IP
  3. fixesign

    fixesign Member

    Messages:
    175
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #3
    Thanks style0, I've used it and succeeded.
     
    fixesign, Mar 29, 2011 IP
  4. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for this man, I too wanted to round-edge one corner, works great.
     
    sburst, May 12, 2011 IP