Bordures CSS - Propriété raccourcie


Table des matières

    Afficher la table des matières


Bordure CSS - Propriété raccourcie

Comme vous l'avez vu à la page précédente, de nombreuses propriétés doivent être prises en compte lors de la gestion des frontières.

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés individuelles des bordures dans une propriété.

La propriété class="w3-codespan">border est une propriété abrégée pour les propriétés de bordure individuelles suivantes :

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

Exemple

p {	border: 5px solid red;
}

Résultat :

Some text

Essayez-le vous-même →

<!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>


Vous pouvez également spécifier toutes les propriétés de bordure individuelles pour un seul côté :

Bordure gauche

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

Résultat :

Some text

Essayez-le vous-même →

<!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>


Bordure inférieure

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

Résultat :

Some text

Essayez-le vous-même →

<!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>