Da ich in letzter Zeit jedes mal wieder bei google suchen musste, wie nun die genaue Syntax für abgerundete Ecken mit CSS 3 ist, werde ich mir das hier mal selber notieren.
Hinzu kommt auch noch, dass jeder echte Browser das zwar schon interpretiert, allerdings ist da auch für (fast) jeden die Syntax anders. Opera beispielsweise hält sich schon jetzt an das vom w3c vorgeschlagene „border-radius“, während Mozilla und Webkit da (noch) ihr eigenes Süppchen brauen.
CSS 3 Standard (Opera 10.5):
border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
Mozilla (Firefox):
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
Webkit (Safari, Chrome):
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
und alles zusammen:
border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
