CSS Border (Rahmen) Eigenschaften

CSS Tutorial Rahmen (border) Eigenschaften und Möglichkeiten

Inhaltsverzeichnis
    -Grundlage
    -Rahmen Farbe
    -Rahmen Position
    -Rahmenart Übersicht
    -Rahmen mit runden Ecken
    -transparenter Rahmen
    -Rahmen bei Bildern

Grundlage

Für jedes Element kann ein Rahmen angezeigt werden, egal ob für Div's, Span's, Tabellen oder Bilder.

Ein Rahmen benötigt für eine korrekte Anzeige folgende 3 Angaben:

CSS Definition	Beschreibung
border-color	Rahmenfarbe
border-width	Strichstärke des Rahmens
border-style	Art des Rahmens (z.B. fest oder gestrichelt)

Hinweis

Es sollten immer alle 3 Angaben verwendet werden um einen Rahmen zu definieren. Ansonsten kann dies bei verschiedenen Browsern zu Darstellungsproblemen führen.

Entweder werden die Border-Angaben im HTML "Style" -Element gemacht

einfaches HTML Border Beispiel

um mich herum ist ein grüner Rahmen

Beispiel:

um mich herum ist ein grüner Rahmen

oder sie werden für die professionellere Website in einer externen CSS Datei versorgt.
Die Border Angeben können immer entweder in der ausführlicheren Schreibweise oder in der Kurzschreibweise angegeben werden, wo bei ich eher die kürzere empfehlen würde, da diese weniger Seiten-Traffic verursacht und weniger Platz in einer CSS Datei braucht.

CSS Border Angaben in ausführlicher Schreibweise

.border {
   border-color: green;
   border-width: 3px;
   border-style: solid;}

CSS Border Angaben in kurzer Schreibweise

.border {border-color: 3px solid green;}

HTML Border Beispiel mit CSS

um mich herum ist ein grüner Rahmen

Rahmen Farbe

Die Farbe des Rahmens kann mit normalen Farbangaben wie Farbname-, Hex- oder RGB- Wert definiert werden.

CSS Border Farbe

.border {
   border-left-color: blue;
   border-width: 10px;
   border-style: solid;}

ich besitze einen blauen Rahmen

Es kann natürlich auch jede Rahmenseite eine andere Farbe haben.

verschiedene CSS Border Seitenfarben

.border {
   border-left-color: blue;
   border-top-color: red;
   border-right-color: green;
   border-bottom-color: violet;
   border-width: 10px;
   border-style: solid;}

hier hat jede Rahmenseite eine andere Farbe

Rahmen Position

Ein Rahmen kann auch nur oben oder unten dargestellt werden.

verschiedene CSS Border Seitenarten

.border {
   border-left:10px solid blue;
   border-top:10px none red;
   border-right:10px dotted green;
   border-bottom:10px dashed violet;
}

- der rechte Rahmen ist blau und durchgezogen
- der obere Rahmen ist nicht sichtbar
- der rechte Rahmen ist grün gepunktet
- der untere Rahmen ist violet gestrichelt

Rahmenart Übersicht

Für die Rahmen Darstellung oder Art gibt es in CSS3 verschiedene Möglichkeiten.

CSS Definition	Rahmen Beschreibung
solid	durchgezogen/fest
double	doppelt
none	kein Rahmen
hidden	ausgeblendet
dotted	gepunktet
dashed	gestrichelt
groove	Doppel Rahmen 3D Effekt
ridge	schwacher 3D Effekt
inset	3D Effekt nach innen
outset	3D Effekt nach aussen

Beispiele mit der Rahmenstärke 5px:

solid

double

none

hidden

dotted

dashed

groove

ridge

inset

outset

Vorsicht

Folgende Elemente benötigen für eine korrekte Darstellung des Rahmens eine gewisse mindest Rahmenstärke:

double Minimum 3px
alle 3D Effekte Minimum 2px

Achtung

Alle 3D Effekte werden derzeit erst im Firefox richtig dargestellt und unterstützt!

Rahmen mit runden Ecken

Die 4 Ecken des Rahmens müssen nicht immer eckig sein, sondern können auch abgerundet werden.

Hier werden alle 4 Ecken mit den gleichen Radien abgerundet.

Border Radien

.border { border-radius: 30px }

um mich herum ist ein Rahmen mit runden Ecken

Natürlich kann auch jeder Ecke ein eigener Radius zugewiesen werden.

unterschiedliche Radien

/* border-radius:
links oben rechts oben rechts unten links unten */

.border { border-radius: 30px 20px 10px 5px }

um mich herum ist ein blauer Rahmen mit vier verschiedenen runden Ecken

Transparenter Rahmen (border)

Ein Rahmen kann auch transparent gestaltet werden. Hierbei wird zusätzlich zu den allgemeinen Rahmen (Border) Eigenschaften noch die "opacity" also Transparenz hinzugefügt.
Um die Transparenz bestimmen zu können muss mit dem "rgba" Farbwert gearbeitet werden.

Transparenter Rahmen

um mich herum ist ein rötlich transparenter Rahmen

um mich herum ist ein rötlich transparenter Rahmen

Hinweis

Transparentswerte:
0 => ganz transparent (unsichtbar)
1 => nicht transparent
0.5 => 50% transparent

Natürlich kann so ein Rahmen auch "unsichtbar" dargestellt werden und so z.B. als Platzhalter oder als Ersatz für Padding oder Margin dienen.

unsichtbarer Rahmen

um mich herum ist ein unsichtbarer Rahmen

um mich herum ist ein unsichtbarer Rahmen

Rahmen bei Bildern

Der Rahmen kann bei einem Bild wie bei jedem anderen Element auch definiert werden.

CSS Border Angaben für ein Bild

Bild mit Rahmen

Abendbaum

Damit der automatisch gesetzte Rahmen bei allen Bildern verschwindet kann in der CSS-Datei mit dem Element "img" gearbeitet werden und so der Rahmen bei den Bildern global deaktiviert werden.

CSS Border Angaben für keinen Rahmen bei Bildern

img {border: none;}

a img {border: none;}

Natürlich kann einem Bild auch ein runder oder abgerundeter Rahmen gegeben werden.

CSS Tutorial Rahmen (border) Eigenschaften und Möglichkeiten

Runder CSS Border bei Bild

letztes Update 19. August 2015

Kommentare

Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche

DoubleTwist

iTunes mit Android Handy synchronisieren

Free YouTube Video Music

gratis Musik für Youtube Videos

Spenden

ROG Innovation unterstützen