CSS Border Radius: abgerundete Ecken mit Style Sheets

Mit der Anweisung „border-radius“ geben wir Objekten abgerundete Ecken mit. Hintergrundfarben, Box-Schatten oder Rahmen werden in die Rundung einbezogen. Diese erscheinen ebenfalls in der entsprechend gewählten Rundung. Um den Code für einen entsprechenden Border-Radius zu erhalten können wir einfach erneut den CSS3 Generator bemühen. Dieser generiert uns sauber und inkl. der aktuellen Experimental-Prefixes unseren CSS3 Code.

Beispiele

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 10px 20px 30px 40px;
    -moz-border-radius: 10px 20px 30px 40px;
    border-radius: 10px 20px 30px 40px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 15px / 30px;
    -moz-border-radius: 15px / 30px;
    border-radius: 15px / 30px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 10px 80%;
    -moz-border-radius: 10px 80%;
    border-radius: 10px 80%;
    overflow:hidden;
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
8 Bewertungen
85 %
1
5
4.25
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.