Tutorial: Abgerundete Ecken erstellen

CSS: Abgerundete Ecken erstellen
In diesem Tutorial werde ich zeigen wie man durch die Benutzung von
CSS3 einen abgerundeten Rand für jedes <div> Objekt im CSS Code
erstellen kann.

Verwendung
Es sieht immer super aus wenn die Boxen und vor allem das Textfeld auf
der eigenen Seite abgerundete Ecken hat. In diesem Tutorial zeige ich,
dass es sehr einfach ist soetwas auch zu erstellen. Diese Methode
funktioniert auf alle <div> Blöcke, also auf alle CSS Teile mit
einem "#'"-Zeichen vor dem Namen.

Abgerundete Ecken erstellen
In einem normalen CSS-Code finden sich <div> Blöcke, welche man
an dem "#"-Zeichen erkennt. Ein <div> Block sieht beispielsweise im
CSS Code so aus:

Fett: Die Raute die den <div> Block markiert.
Grün: Positionierung des Blocks, mit Abstand von links und oben.
Indigo: Höhe und Breite des <div> Blocks.
Rot: Hintergrundfarbe des <div> Blocks.
Blau: Ein Rand mit Ecken die nicht abgerundet sind, mit einer Breite von einem Pixel.

Dieser Code würde eine einfaches Quadrat mit einem eckigen Rand
erzeugen. Doch wir wollen ja wissen wie wir den Rand runden können.

Um den Rand zu Runden benötigen wir zwei weitere Befehle, der
erste ist dieser hier:

Aber mit diesem alleine ist es noch nicht getan, wir benötigen
außerdem den folgenden:

Diese Befehle sagen den Browsern Firefox und Safari und auch bald
dem Internet Explore, dass sie den Rand abrunden sollen und zwar
mit dem angegebenen Radius in Pixeln.

Jetzt muss man beide ja noch einbauen. Das ist einfach, man setzt
einfach beide untereiunander über die Zeile in der "border" definiert
wird.

Grün: Dieser Teil rundet den Rand ab.
Blau: Der eigentliche Rand, auch dieser muss beibehalten werden.

Jetzt hat die Box einen abgerundeten Rand. Man den Rdius von der
Rundung natürlich ändern. Wichtig ist, dass man immer beide
Befehle ändern muss um den Radius zu verändern.

Weitere Optionen
Was kann man tun wenn man nur eine oder 2 Ecken ansprechen
möchte? Auch dafür gibt es Codes, diese werden genauso integriert
wie die eben genannten Codes.

Obere linke Ecke:

Obere rechte Ecke:

Untere linke Ecke:

Untere rechte Ecke:

Wichtige Anmerkung
Der aktuelle Internet-Explorer unterstützt diese Funktion noch nicht,
bei ihm wird ein normaler Rand gezeigt. Laut Microsoft soll die kom-
mende Version CSS3 unterstützen.

Bring doch noch den allgemeinen CSS3 Syntax mit hinein, dann wirkt der auch schon, wenn die Browser es alle unterstützen
Außerdem wäre für KHTML auch noch was zur Verfügung:

funktioniert übrigens nicht nur bei absolut positionierten Boxen.
Ich weiß daher nicht, ob das hier mit ins Tutorial sollte, dass diese fest fixiert ist.

Anfänger behalten das bei, hinterher wollen sie das gar nicht
______________