logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


Abgerundete Ecken mit CSS3 (einfaches Beispiel)

Nachdem "runde Ecken" bis vor kurzem nur über aufwendige Grafikarbeit und damit verbundenem Schneiden von Grafiken und dessen aufwendiger Plazierung über CSS, oder über Javascript möglich war, ist es nun in den neuen Browsergenerationen viel einfacher umzusetzen. Mit ein paar Zeilen CSS3 Code läßt sich dies nun denkbar einfach umsetzen. Dies erleichtert die Arbeit enorm und ist individuell auch kombinierbar, z.B. mit Schatten zu versehen.

In diesem Beispiel sehen Sie eine Box mit 5 Pixel Standard Border und 20 Pixel Border Radius.


#my_CSS3_id {
padding: 1.25rem;
border: 5px solid #222;
-webkit-border-radius: 20px;
border-radius: 20px;
}

 

Round Corners with CSS3 (Verschiedene Abrundungen)

In diesem Beispiel sehen Sie das die 4 Ecken auch individuell abgerundet werden können.

In diesem Beispiel sehen sie eine Box mit vier unterschiedlich abgerundetetn Ecken.


#my_CSS3_id {
padding: 1.25rem;
border: 5px solid #222;
-webkit-border-radius: 60px 20px 80px 5px;
border-radius: 60px 20px 80px 5px;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tags

HTML5 META Artikel Doctype Header Footer