CSS/Eigenschaften/äußere Gestaltung/Rahmen/border-style

Aus SELFHTML-Wiki

Wechseln zu: Navigation, Suche

Mit der Eigenschaft border-style können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.

[Bearbeiten] alle Seiten eines Elements

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • CSS 1.0
Beispiel So sieht's aus
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-style</title>
	<style>
	   p       {margin:       10px;
	            padding:      15px;
	  	    width:        30em;
		    border-width: 5px; 
		    border-color: red;}
	   .dotted {border-style: dotted;}
	   .dashed {border-style: dashed;}
	   .solid  {border-style: solid;}
	   .double {border-style: double;}
	   .groove {border-style: groove;}
	   .ridge  {border-style: ridge;}
	   .inset  {border-style: inset;}
	   .outset {border-style: outset;}
    </style> 
  </head>
  <body>
    <p class="dotted">Textabsatz mit Rahmentyp dotted.</p>
    <p class="dashed">Textabsatz mit Rahmentyp dashed.</p>
    <p class="solid">Textabsatz mit Rahmentyp solid.</p>
    <p class="double">Textabsatz mit Rahmentyp double.</p>
    <p class="groove">Textabsatz mit Rahmentyp groove.</p>
    <p class="ridge">Textabsatz mit Rahmentyp ridge.</p>
    <p class="inset">Textabsatz mit Rahmentyp inset.</p>
    <p class="outset">Textabsatz mit Rahmentyp outset.</p>
  </body>
</html>

Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben

  • none = kein Rahmen (bzw. unsichtbarer Rahmen).
  • hidden = kein Rahmen (bzw. unsichtbarer Rahmen), gedacht für Tabellenzellen
  • dotted = gepunktet.
  • dashed = gestrichelt.
  • solid = durchgezogen.
  • double = doppelt durchgezogen.
  • groove = 3D-Effekt.
  • ridge = 3D-Effekt.
  • inset = 3D-Effekt.
  • outset = 3D-Effekt.

[Bearbeiten] einzelne Seiten eines Elements

Um unter Verwendung der Eigenschaft border-style für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, sind folgende Regeln zu beachten:

  • Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
  • Zwei Angaben: 1. Wert für oben und unten, 2. Wert für links und rechts
  • Drei Angaben: 1. Wert für oben, 2. Wert für links und rechts, 3. Wert für unten
  • Vier Angaben: 1. Wert für oben, 2. Wert für rechts, 3. Wert für unten, 4. Wert für links
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie entsprechende Werte für die Eigenschaften

  • border-top-style, definiert den Rahmentyp für oben,
  • border-right-style, den Rahmentyp für rechts,
  • border-bottom-style, den Rahmentyp für unten und
  • border-left-style, den Rahmentyp für links

setzen.

Von „http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Rahmen/border-style“
Hilfe
Weitere Bereiche
Flattr