Ecken und Kreise mit border-radius, box-shadow und gradient

CSS border-radius: abgerundete Ecken und Kreise mit CSS

Die schlichte CSS-Eigenschaft border wird zur Freude vieler Webdesigner in CSS3 um die Eigenschaft border-radius erweitert. border-radius rendert aber auch Kreise und Ellipsen, nicht nur abgerundete Ecken.

In älteren Browsern braucht border-radius noch einen Browser-Präfix, damit die runden Ecken mit CSS ans Tageslicht kommen:

-moz-border-radius: 8px;
-webkit-border-radius: 8px; 
-khtml-border-radius: 8px; 
border-radius: 8px; 

Inzwischen gehört border-radius in den modernen Browsern zu den etablierten CSS-Eigenschaften.

border-radius-kreis
<img style="border-radius:100px;" width="200" height="200" src="" />

CSS – Kreise mit border-radius

Wenn border-radius halb so groß ist wie die Breite/Höhe des Bildes, entsteht ein Kreis. Kombinieren wir border-radius mit box-shadow, entstehen Buttons.

.buttonDown, .buttonUp { 
    width:100px; height:100px; display:inline-block; 
    background: hsl(50,98%,80%); 
    border-radius: 50% }
 .buttonDown {box-shadow: 4px 4px 10px hsl(50,90%,30%) inset }
 .buttonUp {box-shadow: 4px 4px 10px hsl(50,90%,30%) }

Abgekantete Ecken mit linear-gradient

CSS gradient bringt ja jeden Tag neue Effekte hervor. Also: abgekantete Ecken (»beveled corners«)

.beveled {
    width: 80%; height: 100px; margin-left: auto; margin-right: auto;
    background:
       linear-gradient(135deg, transparent 10px, hsl(45, 96%, 80%) 0) top left,
       linear-gradient(225deg, transparent 10px, hsl(45, 96%, 80%) 0) top right,
       linear-gradient(315deg, transparent 10px, hsl(45, 96%, 80%) 0) bottom right,
       linear-gradient(45deg,  transparent 10px, hsl(45, 96%, 80%) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
 }
SITEMAP BLOG