Tableau des cours

Tutoriel CSS avancé

• Livre de cours CSS
• Introduction au CSS
• Grammaire de base du CSS
• Grammaire avancée du CSS
• Sélecteurs dérivés CSS
• Sélecteurs id CSS
• Sélecteurs de classe CSS
• Création de CSS
• Arrière-plan CSS
• Texte CSS
• Polices CSS
• Listes CSS

Modèle de boîte CSS

• Vue d'ensemble du modèle de boîte CSS
• Marge interne CSS
• Bordure CSS
• Marge externe CSS
• Fusion des marges externes CSS

Positionnement CSS

• Vue d'ensemble de la position CSS
• Position relative CSS
• Position absolue CSS
• Flottaison CSS

Sélecteur CSS

• Sélecteurs d'éléments CSS
• Groupement de sélecteurs CSS
• Détails du sélecteur de classe CSS
• Détails du sélecteur id CSS
• Détails du sélecteur d'attribut CSS
• Sélecteurs descendants CSS
• Sélecteurs d'éléments enfants CSS
• Sélecteurs de frère adjacent CSS

Cours optionnel

Recommandation de cours :

• Boîte à outils CodeW3C.com

La bordure de l'élément (border) est une ligne ou plusieurs lignes autour du contenu et de la marge interne de l'élément.

L'attribut border CSS permet de définir le style, la largeur et la couleur de la bordure de l'élément.

Bordure CSS

Dans HTML, nous utilisons des tableaux pour créer des bordures autour du texte, mais en utilisant les attributs de bord CSS, nous pouvons créer des bordures d'aspect excellent et les appliquer à n'importe quel élément.

À l'intérieur de la marge externe de l'élément se trouve la bordure de l'élément (border). La bordure de l'élément est une ligne ou plusieurs lignes autour du contenu et de la marge interne de l'élément.

Chaque bordure a trois aspects : la largeur, le style et la couleur. Dans la suite, nous vous expliquerons ces trois aspects en détail.

Bordures et fond

La norme CSS stipule que les bordures sont dessinées «au-dessus du fond de l'élément». Cela est important car certains bordures sont «interrompues» (par exemple, des bordures en pointillés ou en tirets), le fond de l'élément doit apparaître entre les parties visibles du bord.

CSS2 stipule que le fond ne s'étend qu'au-delà de la marge interne, et non pas au-delà des bordures. CSS2.1 a corrigé cela : le fond de l'élément est le fond du contenu, de la marge interne et de la zone de bordure. La plupart des navigateurs suivent la définition de CSS2.1, bien que certains navigateurs plus anciens puissent avoir un comportement différent.

Style des bordures

Sont l'un des aspects les plus importants des bordures, ce n'est pas parce que les styles contrôlent l'affichage des bordures (bien que les styles contrôlent bien sûr l'affichage des bordures), mais parce que sans styles, il n'y aurait pas de bordures du tout.

Les styles CSS Attribut border-styleDéfini 10 styles non inherit distincts, y compris none.

Par exemple, vous pouvez définir un bord en outset pour une image pour qu'elle semble comme un "bouton saillant" :

a:link img {border-style: outset;}

Définir plusieurs styles

Vous pouvez définir plusieurs styles pour un bord, par exemple :

p.aside {border-style: solid dotted dashed double;}

La règle ci-dessus définit quatre styles de bord pour les paragraphes de classe aside : un bord supérieur en ligne, un bord droit en pointillés, un bord inférieur en tirets et un bord gauche en double ligne.

Nous avons encore vu ici que la valeur suit l'ordre top-right-bottom-left, et nous avons également vu cet ordre lors de la discussion sur la définition de différentes marges internes avec plusieurs valeurs.

Définir un style unilatéral

Si vous souhaitez définir un style de bord pour un côté spécifique de la boîte d'élément au lieu de définir le style de bord pour les quatre côtés, vous pouvez utiliser les attributs de style de bord unilatéral ci-dessous :

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Par conséquent, ces deux méthodes sont équivalentes :

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Attention :Si vous utilisez la deuxième méthode, vous devez placer les propriétés unilatérales après les propriétés abrégées. Parce que si vous placez les propriétés unilatérales avant border-style, la valeur de la propriété abrégée couvrira la valeur unilatérale none.

Largeur de la bordure

Vous pouvez le faire via Propriété border-widthDéfinir la largeur d'une bordure.

Il y a deux méthodes pour définir la largeur d'une bordure : vous pouvez spécifier une valeur de longueur, par exemple 2px ou 0.1em ; ou utiliser l'un des trois mots-clés suivants, à savoir thin, medium (valeur par défaut) et thick.

Remarque :CSS ne définit pas la largeur spécifique de 3 mots-clés, donc un agent utilisateur peut définir thin, medium et thick respectivement sur 5px, 3px et 2px, tandis qu'un autre agent utilisateur peut les définir respectivement sur 3px, 2px et 1px.

Ainsi, nous pouvons définir la largeur de la bordure de la sorte :

p {border-style: solid; border-width: 5px;}

ou :

p {border-style: solid; border-width: thick;}

Définir la largeur d'un côté

Vous pouvez définir la largeur de chaque côté de l'élément dans l'ordre top-right-bottom-left :

p {border-style: solid; border-width: 15px 5px 15px 5px;}

L'exemple précédent peut également être raccourci de la sorte (ce type d'écriture est appeléValeur de copie）：

p {border-style: solid; border-width: 15px 5px;}

Vous pouvez également définir la largeur de chaque côté de la bordure à l'aide des propriétés suivantes :

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Par conséquent, les règles suivantes sont équivalentes à l'exemple précédent :

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Pas de bordure

Dans l'exemple précédent, vous avez vu que pour afficher un type de bordure, il faut définir le style de bordure, par exemple solid ou outset.

Alors, que se passe-t-il si l'on règle border-style sur none ?

p {border-style: none; border-width: 50px;}

Bien que la largeur du bord soit de 50px, le style de bord est réglé sur none. Dans ce cas, non seulement le style du bord disparaît, mais sa largeur devient également 0. Le bord disparaît, pourquoi ?

C'est parce que si le style de bord est none, c'est-à-dire que le bord n'existe pas du tout, alors le bord n'a pas de largeur, donc la largeur du bord est automatiquement définie sur 0, quel que soit ce que vous avez défini à l'origine.

Cela est très important à retenir. En fait, oublier de déclarer le style de bord est une erreur courante. Selon les règles suivantes, tous les éléments h1 n'auront pas de bord, encore moins 20 pixels de large :

h1 {border-width: 20px;}

Comme la valeur par défaut de border-style est none, sans déclaration de style, cela équivaut à border-style: none.Par conséquent, si vous souhaitez que le bord apparaisse, vous devez déclarer un style de bord.

La couleur du bord

Définir la couleur du bord est très simple. CSS utilise une syntaxe simple Propriété border-color，elle peut accepter jusqu'à 4 valeurs de couleur à la fois.

Vous pouvez utiliser n'importe quel type de valeur de couleur, par exemple, cela peut être une couleur nommée, une valeur hexadécimale ou une valeur RGB :

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Si la valeur de couleur est inférieure à 4, la répétition de la valeur aura effet. Par exemple, la règle suivante déclare que les bords supérieur et inférieur du paragraphe sont bleus, et les bords gauche et droit sont rouges :

p {
  border-style: solid;
  border-color: blue red;
  }

Remarque :La couleur de bord par défaut est la couleur de premier plan de l'élément. Si aucune couleur n'est déclarée pour le bord, elle sera la même que la couleur du texte de l'élément. D'autre part, si l'élément n'a aucun texte, supposez qu'il s'agit d'un tableau, qui ne contient que des images, alors la couleur du bord de ce tableau est la couleur de texte de l'élément parent (parce que color peut être hérité). Cet élément parent est probablement body, div ou un autre table.

Définir une couleur unilatérale

Il existe également des propriétés de couleur de bord unilatérales. Leur principe est le même que pour les styles et les propriétés de largeur unilatérales :

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Pour spécifier un bord noir en ligne pour l'élément h1 et un bord rouge en ligne pour le bord droit, vous pouvez le spécifier ainsi :

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Bord transparent

Nous avons déjà parlé, si le bord n'a pas de style, il n'a pas de largeur. Cependant, dans certains cas, vous pourriez vouloir créer un bord invisible.

CSS2 a introduit la valeur de couleur de bord transparent. Cette valeur est utilisée pour créer un bord invisible de largeur. Regardez l'exemple suivant :

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Nous avons défini les styles suivants pour les liens ci-dessus :

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Essayez-le vous-même

Dans un sens, en utilisant transparent, le bord est comme une marge interne supplémentaire ; en plus, il a l'avantage de pouvoir le rendre visible lorsque vous en avez besoin. Ce bord transparent est équivalent à une marge interne, car le fond de l'élément s'étend à la zone de bord (si le fond est visible).

Points importants :Avant IE7, IE/WIN ne fournissait pas de support pour transparent. Dans les versions précédentes, IE définissait la couleur de bord en fonction de la valeur de color de l'élément.

Attributs des bords CSS

Boîte à outils

Manuel de référence CSS

Exemple CSS

Test CSS

Tutoriel CSS

Liens de parrainage