Runden Ecken mit border-radius

Ganze Heerscharen von Webdesignern haben sich schon mit dem Problem der Darstellungen runder Ecken beschäftigt, mit border-radius ist es ganz einfach.

Syntax

border-radius: Abrundungsfaktor

Beim Firefox steht -moz-border-radius, bei Google Chrome und Safari -webkit-border-radius.

Browserunterstützung

Firefox	Chrome	Safari	Opera	Internet Explorer
+3.0	+4.0	+3.1	+10.5	+9.0 ???

Beispiel 1

Text in einer Box mit runden Ecken

Diesen runden Ecken lassen sich sehr gut mit dem Schatteneffekt kombinieren.

Quellcode zum Beispiel

				.borderradius1{

				-webkit-border-radius: 5px;

				-moz-border-radius: 5px;

				border-radius: 5px;

				margin:15px auto; 

				width:80%; 

				color:#FFFFFF; 

				background-color:#BB0000; 

				height:60px; 

				padding-left:15px; 

				padding-right:15px; 

				padding-top:5px; 

				padding-bottom:5px

				}

Beispiel 2