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