title: CSS border radius is not curving the same on all side of the box
body: <p>could anyone tell me why, if i use border-radius: 10px it doesn't round all the edges the same?</p>
  
  <pre><code>#portfolio1
  {
  
      background-image:url("images/bg.png");
      background-repeat: none;
  
      height: 150px;
  
      width: 300px;
      float: left;
      margin-top:10px;
      margin-bottom:0px;
      margin-left:10px;
      margin-right:10px;  
      border-radius: 10px;
      /*border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;*/
      /*-webkit-border-radius: 20px;*/
  }
  </code></pre>
  
  <p>Notice I've commented a few lines of css where I was trying different things. I seems that if I to the individual border values to different for left and right edges it looks okay but still has something wrong with it.</p>
  
  <p>Also the same with the webkit one. I'm using chrome, did try it with firefox as well but got the same problem. Could it be to do with the margin values I'm using? also I have portfolio1, portfolio2 and portfolio3 which are all very similar, but when displayed on my webpage I'm using each of them twice..... If that makes a difference.</p>
  
  <p>Thanks for the help.</p>