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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Rahmentypen[Bearbeiten]

alle Seiten eines Elements[Bearbeiten]

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.
Beispiel ansehen …
        
p {
  margin:       10px;
  padding:      15px;
  width:        30em;
  border-width: 5px; 
  border-color: red;
}

.gepunktet {border-style: dotted;}
.gestrichelt {border-style: dashed;}
.durchgezogen  {border-style: solid;}
.doppelt {border-style: double;}
.gerillt {border-style: groove;}
.kammfoermig  {border-style: ridge;}
.inset  {border-style: inset;}
.outset {border-style: outset;}

einzelne Seiten eines Elements[Bearbeiten]

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, 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.

variable Länge der Strichelung[Bearbeiten]

Wie die Strichelung bei border-style: dashed ausgeführt wird entscheidet der Browser. Eine Festlegung der Strichlänge ist nicht vorgesehen. In der zukünftigen CSS Backgrounds and Borders Module Level 4 ist dafür eine border-clip-Eigenschaft geplant.

In SVG können Sie mit stroke-dasharray Länge und Rhythmus der Strichelung von Konturen frei gestalten.