border-radius (runde Ecken) – CSS3 Adventskalender Tag 1

Runde Ecken (border-radius) sind das langersehnte Feature, das CSS lange Zeit gefehlt hat. Zumeist musste man auf Grafiken und abstruse HTML-Konstrukte zurückgreifen um zum gewünschten Ergebnis zu kommen. Um einen kleinen Wermutstropfen vorweg zu nehmen, wer runde Ecken sauber im Internet Explorer 6-8 darstellen will, muss weiterhin auf Grafiken etc. zurückgreifen, erst der IE9 setzt die Eigenschaft border-radius um. Firefox und Webkit-Browser bieten durch den Einsatz von Vendor-Prefixen schon seit längerem die Möglichkeit border-radius einzusetzen.

Die Shorthand-Schreibweise ist ähnlich der padding- und margin-Shorthand-Schreibweise (z.B. border-radius: 20px).

-moz-border-radius: 20px;
-webkit-border-radius: 20px; 
/* aktuelle Webkitbrowser brauchen keinen Prefix mehr */
border-radius: 20px;

Für individuelle Ecken sind die Schreibweisen zwischen -moz und -webkit Browser unterschiedlich:

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius : 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px;

Wie bei padding und margin werden auch bei border-radius die verschiedenen Werte für den Radius im Uhrzeigersinn angegeben, also für die Ecken übersetzt: oben-links oben-rechts unten-rechts unten-links

-moz-border-radius: 5px 10px 15px 20px;
-webkit-border-radius: 5px 10px 15px 20px;
border-radius: 5px 10px 15px 20px;

Tabs mit abgerundeten Ecken oben erhält man mit der Angabe:

-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;

praktisches Beispiel:

Suchformular Screenshot:

IE-Ansicht (6-8):

HTML:

<form class="searchForm" action="" method="post">
  <input class="searchField" type="text" 
  value="Suchwort eingeben..." 
  onfocus="if (this.value == 'Suchwort eingeben...')
  {this.value = '';}" onblur="if (this.value == '')
  {this.value = 'Suchwort eingeben...';}" />
  <input class="searchButton" type="submit" value="Suchen" />
</form>

CSS:

  .searchForm {
    background-color: #F5FBFE;
    border: 1px solid #E0EDF3; 
    color: #30393D;
    padding: 3px 4px; 
    width: 213px;
    
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  }
  
  .searchField {
    background-color: #FFF;
    border: 1px solid #E0EDF3; 
    color: #30393D;
    padding: 3px 4px;
    height: 16px;
    width: 135px;
    
    -moz-border-radius: 20px 0 0 20px;
    -webkit-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;
  }
  
  .searchButton {
    background-color: #30393D; 
    border: 1px solid #30393D; 
    color: #FFF; 
    padding: 1px 4px;
    margin-left: -5px;
    height: 24px;
    width: 68px;
    vertical-align: top;
    
    -moz-border-radius: 0 20px 20px 0;
    -webkit-border-radius: 0 20px 20px 0;
    border-radius: 0 20px 20px 0;
  }

Demo

Demo-Datei zu CSS3 border-radius aufrufen

Browser-Support:

Safari 3+, Chrome 3+, Firefox 1+, Opera 10.5+, and IE9 Beta
Ab der Version 4 braucht der Firefox auch keinen Prefix mehr.

Weiterführende Infos gibt es auf: https://developer.mozilla.org/de/CSS/border-radius

Am Tag 2 geht es im Webstandard-Blog mit „Border-Radius – Ungleiche Ecken – CSS3 Adventskalender“ weiter.