A Web Design Forum for Web Designers and Web Developers

The Web Design Forum is here to help web designers and developers find answers to everyday questions in web design. If you're just learing web design or already a freelance web designer the Web Design Forum may be able to help. Post your questions in the corresponding category and someone will surely be along to help. Thanks, James Weaver

Place Your Ad Here

Help with CSS3 rounded corners
  • Hello,

    I'm trying to create rounded corners with CSS3 and am having some problems. My html looks like this...

    <div class="topnav rounded">
        <ul>
                <li>home</li>
                <li>code</li>
                <li>freebies</li>
                <li>blog</li>
                <li>about</li>
         </ul>
    </div>

    and my css is as follows...

    .topnav
    {
        position: relative;
        width: 300px;
        height: 30px;
        background-color: #DDD;
        border: 1px solid #333;
    }

    .rounded
    {
       
    border-left-top-radius
    border-right-top-radius
    border-right-bottom-radius
    border-left-bottom-radius
        -moz-border-topleft-radius
        -moz-border-topright-radius
        -moz-border-bottomright-radius
        -moz-border-bottomleft-radius
    }

    I copied this from a website and am not sure why it's not working. What's the -moz for also?
  • 2 Comments sorted by
  • Vote Up1Vote Down chaneychuckchaneychuck
    Posts: 2 Accepted Answer
    I assume you've left of the actual amount you would like the radius to be...ie..5px. That's you're first mistake.

    Secondly, if I'm not mistaken, you've switched some of the attributes around within their respective names. The correct way to write them would be...

    .rounded
    {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    }

    I hope this helps!

    Chuck
  • Thanks! That did it!