border-top

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Die border-top Shorthand CSS Eigenschaft setzt alle Eigenschaften des oberen Rands eines Elements.

Probieren Sie es aus

border-top: solid;

border-top: dashed red;

border-top: 1rem solid;

border-top: thick double #32a1ce;

border-top: 4mm ridge rgba(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: #eee;
  color: #8b008b;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Wie bei allen Shorthand-Eigenschaften setzt border-top immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht angegeben sind. Es setzt die nicht angegebenen auf ihre Standardwerte. Betrachten Sie den folgenden Code:

css
border-top-style: dotted;
border-top: thick green;

Dieser ist tatsächlich gleichbedeutend mit diesem:

css
border-top-style: dotted;
border-top: none thick green;

Der Wert von border-top-style, der vor border-top angegeben wurde, wird ignoriert. Da der Standardwert von border-top-style none ist, führt das Nicht-Angaben des border-style-Teils zu keinem Rand.

Zugrunde liegende Eigenschaften

Diese Eigenschaft ist eine Abkürzung für die folgenden CSS-Eigenschaften:

Syntax

css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

/* Global values */
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: revert-layer;
border-top: unset;

Die drei Werte der Shorthand-Eigenschaft können in beliebiger Reihenfolge angegeben werden, und ein oder zwei von ihnen dürfen weggelassen werden.

Werte

<br-width>

Siehe border-top-width.

<br-style>

Siehe border-top-style.

<color>

Siehe border-top-color.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

border-top = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Anwendung eines oberen Rands

HTML

html
<div>This box has a border on the top side.</div>

CSS

css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Ergebnisse

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

Browser-Kompatibilität

Siehe auch