HTML: Rahmen um Text – So gehts

Wenn du in HTML einen Rahmen um den Text erstellen möchtest, dann kannst du dafür den CSS Code boarder verwenden. Wie das funktioniert zeige ich dir in diesem Beitrag.

So kannst du in HTML einen Rahmen um Text erstellen:

Mit dem <hr> Tag

• Das <hr>-Tag: Dieses Tag fügt einen horizontalen Trennstrich ein, der als einfacher Rahmen verwendet werden kann. Du kannst die Eigenschaften width, height, color und style verwenden, um das Aussehen des Rahmens anzupassen.

<hr>
<p>Mein Text mit Rahmen</p>
<hr>

Ergebnis

Mein Text mit Rahmen

Rahmen mit einem <div> Tag

Das <div>-Tag: Du kannst ein <div>-Element um deinen Text herumwickeln und dann CSS verwenden, um einen Rahmen um das Element zu erstellen. Dies bietet mehr Flexibilität bei der Anpassung des Rahmens.

<div style="border: 1px solid black;">
  <p>Mein Text mit Rahmen</p>
</div>

Ergebnis

Rahmen mit CSS-Eigenschaften erstellen

border

• Die border-Eigenschaft: Die border-Eigenschaft kann verwendet werden, um einen Rahmen um jedes HTML-Element zu erstellen. Du kannst die Eigenschaften border-width, border-style und border-color verwenden, um das Aussehen des Rahmens anzupassen.

p {
  border: 2px solid red;
}

box shadow

• Die box-shadow-Eigenschaft: Die box-shadow-Eigenschaft kann verwendet werden, um einen Schatteneffekt um ein Element zu erstellen, der als subtiler Rahmen verwendet werden kann. Du kannst die Eigenschaften box-shadow-color, box-shadow-offset und box-shadow-blur verwenden, um das Aussehen des Schattens anzupassen.

p {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

weitere Möglichkeiten:

• Tabellen: Du kannst eine Tabelle mit einer einzigen Zelle verwenden, um einen Rahmen um deinen Text zu erstellen. Dies ist eine ältere Methode, die heute nicht mehr so häufig verwendet wird.
• Bilder: Du kannst ein Bild mit einem transparenten Rand um deinen Text verwenden. Dies kann eine gute Option sein, wenn du einen dekorativen Rahmen möchtest.

Welche Methode du am besten verwendest, hängt von deinen spezifischen Bedürfnissen und Vorlieben ab. Bedenke bei deiner Wahl Faktoren wie das Aussehen des Rahmens, die Flexibilität bei der Anpassung und die Kompatibilität mit verschiedenen Browsern.

Tipp: Experimentiere mit verschiedenen Methoden und CSS-Eigenschaften, um den perfekten Rahmen für deinen Text zu erstellen.

Über mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite