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
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é :
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>
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>