SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [CSS3] Runde Ecken mit „border-radius“

    10. April 2011 0 Webdesign css | demo | html | internet | tutorial

    Wollte man bisher Block-Elemente abrunden, musste man entweder zu Javascript greifen oder per background-Eigenschaft eine Bilddatei einbinden. Mit CSS3 kann man sich dieses Gewurschtel sparen und auf die Eigenschaft „border-radius“ zurückgreifen. Die Möglichkeiten sind vielfältig, sogar Kreise sind mit entsprechendem Code darstellbar. Aber dazu später mehr.

    Ich persönliche mag abgerundete Ecken. Es sieht einfach modern und „rund“ aus. Ha ha! Wortwitz verstanden?

    Syntax

    .box {
    border-radius: 10px;
    }
    

    Shorthand

    Kürzer geht’s nicht.

    Browserunterstützung

    .box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    
    • Apple Safari 5+
    • Google Chrome 10+
    • Internet Explorer 9+
    • Mozilla Firefox 3.6+
    • Opera 11.1+

    Beschreibung

    Schauen wir uns das Beispiel mal genauer an:

    .box {
    border-radius: 10px;
    }
    

    Die Angabe eines einzelnen Wertes rundet alle vier Ecken ab. So schaut das Ergebnis aus:

    Natürlich können auch einzelne Ecken abgerundet werden. Dabei sind auch unterschiedliche Rundungen möglich:

    .box {
    border-top-left-radius: 50px;
    border-top-right-radius: 25px;
    }
    

    In diesem Beispiel werden lediglich die oberen beiden Ecken abgerundet. Die linke obere Ecke mit 50 px und die rechte mit 25 px.

    Hier geht es dann auch kürzer:

    .box {
    border-radius: 50px 25px 0 0;
    }
    

    Es gilt folgende Reihenfolge: oben links, oben rechts, unten rechts und als letztes unten links.

    Zur Vervollständigung die Syntax für alle Ecken:

    border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-right-radius
    

    Für den Firefox etwas anders:

    -moz-border-radius-topleft
    -moz-border-radius-topright
    -moz-border-radius-bottomleft
    -moz-border-radius-bottomright
    

    Die Länge der Rundung kann ebenfalls bestimmt werden. Es wird einfach ein zweiter Wert mitgegeben, wobei der erste für die Rundung und der zweite für die Länge steht.

    .box {
    border-top-left-radius: 50px 100px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 50px 100px;
    }
    

    Ergibt dann dies:

    Auch interessant: es lassen sich sogar Kreise darstellen:

    .kreis {
    width:100px;
    height:100px;
    border-radius: 50px;
    }
    

    Auf der Demo-Seite gibt es weitere Beispiele.

    Demo ansehen

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    Diese Artikel könnten dich ebenfalls interessieren
    • 1
      22. Mai 2012
      [WordPress] Theme „DREI“ steht bereit
    • 0
      19. Mai 2012
      [WordPress] Mehrere Sidebars nutzen
    • 1
      9. Mai 2012
      [WordPress] Mein neues Theme ‚ZWEI‘
    • 1
      23. April 2012
      [WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme „DREI“ steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Oliver bei Willkommen zur Testfahrt
      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast