Mit CSS (Cascading Style Sheets) gestaltete Trennlinien

 

In den HTML-Quelltext eingefügt, erzeugt der Code eine horizontale Linie oder eine andere Form

 

Hier einige Beispiele:

 

 

<hr style="border: 3px solid #00ffff; background-color: #0000ff; height: 10px;">

 


 

 

 

 

<hr style="height: 3px; border: none; background-color: #000080; width: 70%;">

 


 

 

 

 

<hr style="height: 8px; border: 2px dotted #ff0000; background-color: #000080; width: 60%;">

 


 

 

 

 

<hr style="border: none; border-top: 4px dotted #00ff00; background-color: #ffffff; height: 4px;">

 


 

 

 

 

<hr style="border-bottom: 10px solid #ff0000; border-top: 10px solid #00ff00; background-color: #0000ff; height: 30px;">

 


 

 

 

 

<hr style="height: 8px; border: 2px dashed #ffd700; background-color: #000080; width: 50%;">

 


 

 

 

 

<hr style="height: 24px; border: 8px groove #ffd700; background-color: #000080; width: 60%;">

 


 

 

 

 

<hr style="height: 24px; border: 8px double #ffd700; background-color: #000080; width: 60%;">

 


 

 

 

 

<hr style="height: 24px; border: 8px ridge #ffd700; background-color: #8b0000; width: 60%;">

 


 

 

 

 

<hr style="height: 24px; border: 8px inset #ffd700; background-color: #000080; width: 60%;">

 


 

 

 

 

<hr style="height: 24px; border: 8px outset #ffd700; background-color: #006400; width: 60%;">

 


 

 

 

 

<hr style="height: 12px; border: 4px dotted #ffd700; background-color: #000080; width: 500px;">

 


 

 

 

 

<hr style="border: 3px solid #ffd700; background-color: #0000ff; height: 10px; width: 60%;">

 


 

 

 

 

<hr style="border: 6px solid #00ffff; background-color: #0000ff; height: 20px; width: 100px;">

 


 

 

 

 

<hr style="border: 15px solid #ffa500; background-color: #0000ff; height: 50px; width: 100px;">

 


 

 

 

 

<hr style="border: 10px solid #ffa500; background-color: #ffd700; height: 100px; width: 100px;">

 


 

 

 

 

<hr style="border: 0px; background-color: #0000ff; height: 16px; width: 16px;">

 


 

 

 

 

<hr style="border: 2px solid #00ffff; background-color: #0000ff; height: 16px; width: 16px;">

 


 

 

 

 

<hr style="border: 15px groove #ffa500; background-color: #0000ff; height: 50px; width: 100px;">

 


 

 

 

 

<hr style="border: 15px solid #ffd700; background-color: #ffffff; height: 50px; width: 100px;">

Hintergrundfarbe der Webseite und background-color sind hier gleich:

 


 

 

 

 

<hr style="border-bottom: 50px solid #ff0000; border-top: 50px solid #00ff00; background-color: #0000ff; height: 150px; width: 150px;">

 


 

 

 

 

<hr style="border-left: 50px solid #ff0000; border-right: 50px solid #00ff00; background-color: #0000ff; height: 150px; width: 150px;">

 


 

 

 

 

 

 

 

HOME

Valid CSS! Platzhalter transparent Valid HTML 4.01 Transitional