Rounded edges in CSS, set
The CSS-command "border-radius" can represent in the most current browsers have round corners. The degree of rounding, you determine a Pixel information according to the CSS command, e.g. "border-radius: 10px;".
If you are using two pixel data is completed, the web content is elliptical. The first number stands for the horizontal, the second for the vertical value: "border-radius: 10px 20px;"
So you are in all of the browsers on the safe side, you should specify in your Stylesheet in addition to the browser-specific commands:
- "-moz-border-radius" (Mozilla Firefox)
- "-webkit-border-radius" (Safari and Google Chrome)
- "-kthml-border-radius" (Safari and Konqueror)
- "-o-border-radius" (Opera to 9.x)
Corner pairs or individual round corners
With the upper command, all four corners get the same rounding. You can specify in the Stylesheet but also the properties for individual corners or corner couples and their web content as an individual Form of lending. These commands will work even if the browser prefix to put in front of it.
- Commands for corner pairs: "border-top-radius" (above) / "border-bottom-radius" (below) / "border-left-radius" (left) / "border-right-radius" (right)
- Commands for individual corners: "border-top-left-radius" (top left) / "border-top-right-radius" (top right) / "border-bottom-left-radius" (below, left) / "border-bottom-right-radius" (below right)
Round corners in Internet Explorer represent
In Internet Explorer the CSS-command "border-radius" makes a still having problems, so you should apply here is a Workaround: you can Use the HTC-Script "border-radius.htc", you can download for free, and you bind it with "behavior:url(border-radius.htc);" in your Stylesheet.
