Web Design Forum

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

• Vote Up0Vote Down b.harper86 January 5

  Posts: 2

  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

  • Votes
  • Date Added
• Vote Up1Vote Down chaneychuck January 8

  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
  
• Vote Up0Vote Down b.harper86 January 8

  Posts: 2

  Thanks! That did it!