Rahmen um Bilder oder Texte in Html-Css

Einfache Anleitung mit Code für Rahmen und Ränder, für Unterstreichungen oder bunte Linien.

Ob schmal oder breit, waagrecht oder senkrecht, Rahmen beleben Bilder und Texte und geben jedem Webdesign eine individuelle Note.

Nachfolgend zeige ich auf, wie wir mit der Border-Eigenschaft Rahmen um Bilder und Texte machen können. Oder auch mal nur unter oder neben Texte.

Rahmen mit Css-Html

Ausgangsbild:

Gräser

So soll es aussehen:

Gräser

Dem Bildrahmen rechts habe ich folgende Eigenschaften gegeben:

img {
border: 4px solid #000000;
}

Der Rahmen ist auf allen Seiten 4px dick und trägt die Farbe schwarz. Solid steht für einen durchgezogenen Rahmen.

Der Code kann auch direkt ins Html geschrieben werden:

Nicht alle Seiten gleich breit

Möchten wir den Rahmen ähnlich eines Passepartouts gestalten oder wie ein Polaroid-Foto aussehen lassen, dessen untere Rahmenbreite (rot geschrieben) grösser sein soll, geben wir dem Bild folgende Eigenschaften:

img {
border-top:16px solid #000000;
border-right:16px solid #000000;
border-bottom:50px solid #000000;
border-left:16px solid #000000;
}

Margeritenblüte Portrait

Die Werte können selbstverständlich beliebig variert werden.

Zur Wiederholung:

Top = Rahmen oben,
Right = rechte Seite,
Bottom = unterer Rahmen,
Left = linke Seite.

Korrekte Reihenfolge in der Schreibweise:

top, right, bottom, left

> Rahmen um Bild in Photoshop, Gimp oder Picasa machen

Rahmen um Text

Auch um Texte kann man schöne Rahmen oder Ränder machen. Dieser feine blaue Rahmen hat zum Beispiel folgende Eigenschaften im Css:

p.rahmen-blau {
border: 1px solid #4285f4;
padding:0.5em;
}

Das Padding steht für den Abstand zwischen Text und Rahmen. So klebt der Rand nicht direkt am Text. Das wirkt aufgeräumter.

Text unterstrichen

Übrigens die blauen Unterstreichungen unter meinen Überschriften, entstehen aus denselben Border-Eigenschaften wie die Rahmen. Nachfolgend der Code für die Css-Datei:

p.bo {
border-top:8px solid #115edc;
width:20%;
margin:auto;
margin-top:-2em;
padding-bottom:2em;
}

Anstelle des Border-top könnte man auch ein Border-bottom nehmen. Mit den Werten einfach ausprobieren.

Rahmen um Bild in Html und Css

Auf wiki.selfhtml.org.

Verschiedene Rahmen um Bilder

Übersichtlich erläutert und bebildert.

Hover Bild ohne JavaScript

Hoverbild mit Text, mit schwarzweiss Bild und mit Rahmen. Alles ganz einfach mit Html und Css.