CSS-Ränder – Kurzschrifteigenschaft


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS Border - Shorthand-Eigenschaft

Wie Sie auf der vorherigen Seite gesehen haben, müssen beim Umgang mit Rändern viele Eigenschaften berücksichtigt werden.

Um den Code zu verkürzen, ist es auch möglich, alle einzelnen Randeigenschaften in anzugeben eine Immobilie.

Die Eigenschaft class="w3-codespan">border ist eine Abkürzungseigenschaft für die folgenden einzelnen Rahmeneigenschaften:

  • class="w3-codespan">border-width
  • class="w3-codespan">border-style (required)
  • class="w3-codespan">border-color

Beispiel

p {	border: 5px solid red;
}

Ergebnis :

Some text

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>
</html>


Sie können alle einzelnen Randeigenschaften auch nur für eine Seite festlegen:

Linker Rand

p {	border-left: 6px solid red;
}

Ergebnis :

Some text

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>
</html>


Untere Grenze

p {	border-bottom: 6px solid red;
}

Ergebnis :

Some text

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>

</body>
</html>