Rahmen für Bilder und Text erstellen

Fehlt ein Rahmen an einem Bild oder um einen Text? So schnell fügen Sie einen mit CSS hinzu.

<img src="bild.gif"
 style="border-style: solid; border-width: 7px; border-color: #99CCFF;">

<img src="bild.gif" style="border-style: dotted;
 border-width: 7px; border-color: #99CCFF;">

<img src="bild.gif" style="border-style: outset;
 border-width: 7px; border-color: gold;">

<img src="bild.gif" style="border-style: inset;
 border-width: 7px; border-color: gold;">

<img src="bild.gif" style="border-style: groove;
 border-width: 7px; border-color: gold;">

 

CSS-Anweisung abkürzen

Um einen Rahmen hinzuzufügen reicht auch eine kürzere CSS-Anweisung aus.

<img src="bild.gif" style="border: double 5px deeppink">

<img src="bild.gif" style="border: dashed 2px #FF4500">

Rahmen für den Text

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien ...
<div style="border: dotted 2px #FFD700">
Weit hinten, hinter den Wortbergen, ...</div>

Eigene Bilder für den Rahmen (CSS3)

Wird unterstützt von: Mozilla Firefox, Google Chrome und Microsoft Edge.

<style>
img.rahmen {
 border: 30px solid transparent;
 border-image: url("border.png") 30 30 repeat;
}
</style>

<img src="bild.gif" class="rahmen" alt="">

<style>
img.rahmen {
 border: 30px solid transparent;
 border-image: url("border.png") 10 10 repeat;
}
</style>

<img src="bild.gif" class="rahmen" alt="">

<style>
img.rahmen {
 border: 30px solid transparent;
 border-image: url("border.png") 30 30 round;
}
</style>

<img src="bild.gif" class="rahmen" alt="">

<style>
img.rahmen {
 border: 30px solid transparent;
 border-image: url("border.png") 30 30 stretch;
}
</style>

<img src="bild.gif" class="rahmen" alt="">

<style>
img.rahmen {
 border: 30px solid transparent;
 border-image: url("border.png") 55 55;
}
</style>

<img src="bild.gif" class="rahmen" alt="">

Verwendete Grafik:

border.png
81 x 81 Pixel
664 Byte

Rahmen für den Text (CSS3)

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
<style>
div.rahmen {
 border: 20px solid transparent;
 border-image: url("border2.png") 30 30 repeat;
 background-color: #7B91AC;
 color: #FFFFFF;
 width: 500px;
}
</style>

<div class="rahmen">Weit hinten, hinter den Wortbergen, ...</div>

Verwendete Grafik:

border2.png
102 x 102 Pixel
890 Byte
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
<style>
div.rahmen {
 border: 20px solid transparent;
 border-image: url("border3.png") 30 30 repeat;
 width: 350px;
}
</style>

<div class="rahmen">Weit hinten, hinter den Wortbergen, ...</div>

Verwendete Grafik:

border3.png - 183 x 183 Pixel - 1.3 KB

 

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

 

Rahmengenerator

   



<img src=bild.gif" style="border: ridge 15px #FFFF42;">