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.

Flattr this!

9 Gedanken zu „border-radius (runde Ecken) – CSS3 Adventskalender Tag 1“

  1. Ich will nicht zu viel vorweg nehmen, aber Runde Ecken für den IE 6-8 kommt nochmal genauer! ;)

  2. Tolle Idee mit dem Adventkalender. Abgerundete Ecken kannte ich schon, aber der Rest von CSS3 ist noch ziemlich Neuland für mich.

  3. Guter Artikel. Sicher kein Fehler, sich mit dem Thema detailierter zu beschaeftigen. Werde auf jeden Fall die weiteren Posts im Auge behalten.

Kommentare sind geschlossen.