border CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die border CSS Kurzform Eigenschaft setzt den Rahmen eines Elements. Sie legt die Werte von border-width, border-style und border-color fest.
Probieren Sie es aus
border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgb(211 220 50 / 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
Zusammenhängende Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #ff3333;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;
Die Eigenschaft border kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt keine Rolle.
Hinweis:
Der Rahmen wird unsichtbar sein, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf none steht.
Werte
<line-width>-
Legt die Dicke des Rahmens fest. Standardwert ist
medium, falls nicht vorhanden. Sieheborder-width. <line-style>-
Legt den Stil des Rahmens fest. Standardwert ist
none, falls nicht vorhanden. Sieheborder-style. <color>-
Legt die Farbe des Rahmens fest. Standardwert ist
currentColor, falls nicht vorhanden. Sieheborder-color.
Beschreibung
Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Teilwerte auf ihren Anfangswert gesetzt. Wichtig ist, dass border nicht verwendet werden kann, um einen benutzerdefinierten Wert für border-image festzulegen, sondern es wird stattdessen auf seinen Anfangswert, d.h. none, gesetzt.
Die Kurzform border ist besonders nützlich, wenn Sie alle vier Rahmen gleich machen möchten. Um sie jedoch voneinander zu unterscheiden, können Sie die Langform border-width, border-style und border-color verwenden, die unterschiedliche Werte für jede Seite akzeptieren. Alternativ können Sie jeden Rahmen einzeln über die physischen (z.B. border-top) und logischen (z.B. border-block-start) Rahmen-Eigenschaften ansprechen.
Rahmen vs. Umrisse
Rahmen und Umrisse sind sehr ähnlich. Umrisse unterscheiden sich jedoch in den folgenden Punkten von Rahmen:
- Umrisse beanspruchen nie Platz, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
- Laut Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
border =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Einen rosa "outset" Rahmen setzen
HTML
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
CSS
div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # propdef-border |