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.

La propriété CSS border-top est une propriété raccourcie qui permet de paramétrer la bordure haute d'un élément.

C'est une propriété raccourcie qui permet de définir les valeurs de :

Exemple interactif

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;
}

Note : Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.

Comme pour les autres propriétés raccourcies, border-top définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :

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

est équivalent à :

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

et la valeur border-top-style fournie avant border-top est ignorée.

La valeur par défaut de border-top-style étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

Syntaxe

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

Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.

Valeurs

<br-width>

Voir border-top-width.

<br-style>

Voir border-top-style.

<color>

Voir border-top-color.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

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

Exemples

CSS

css
.exemple {
  border-top: 3px dotted orange;
}

HTML

html
<p class="exemple">
  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
  « MARMELADE D’ORANGES. »
</p>

Résultat

Spécifications

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

Compatibilité des navigateurs