View Single Post
09-30-2012, 04:34 PM
#3
newkid is offline newkid
Status: Junior Member
Join date: Sep 2006
Location:
Expertise: PHP,MySQL, HTML(5), CSS
Software: Photoshop, Sublime Text2,MS VS
 
Posts: 63
iTrader: 1 / 100%
 

newkid is on a distinguished road

Send a message via Skype™ to newkid

  Old

This is not at all difficult. Let's say you have a div and would like to have the left corners (top left and bottom left) to be round and leave the right side as is. In the example style below let us assume that the div's id in question is "content".

HTML Code:
#content {
   border-top-left-radius:8px;
   border-bottom-left-radius:8px;
}
The radius determines how round you want the corners to be. The higher the value the more round it is. Also, the value can be expressed in either px or %. The properties, border-top-right and border-bottom-right are also available.

If you would like all corners to have the same value, there is no need to be redundant by writing each of these. Simple do:

HTML Code:
#content {
   border-radius:8%;
}
However, ensure that it works in other Firefox and other browsers you must use the prefixes -moz-, and -webkit- like so:

HTML Code:
#content {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
}
So far, about only 5 browsers (Firefox 4 +, Opera, Safari 5+ and IE 9 +) supports these properties.

Furthermore, you may run into situations where these properties may not work at all or not as perfectly cross-browser-wise. To solve this you can use CSS3 PIE. Note that if your page is using JQuery, these properties will work fine and there is no need to use CSS3 PIE at all. Hope this helps!