Maison >interface Web >tutoriel CSS >Quelle propriété en CSS spécifie la largeur d'une bordure ?
Quelle propriété en CSS spécifie la largeur d'une bordure ?
- WBOYavant
- 2023-08-29 21:09:03924parcourir
En CSS, la propriété "border" est utilisée pour appliquer une bordure à n'importe quel élément HTML, comme un div. De plus, nous pouvons également définir différentes bordures, couleurs, largeurs et autres styles.
Dans ce tutoriel, nous apprendrons différentes manières de définir la largeur de la bordure d'un élément. De plus, nous apprendrons à définir la largeur des différents côtés d'un élément.
Utilisez la propriété CSS border-width pour définir la largeur de la bordure
La propriété CSS « border-width » est utilisée pour définir la largeur de la bordure. Les utilisateurs peuvent définir la largeur des différents côtés grâce à ces quatre valeurs. Toutefois, les trois dernières valeurs sont une option.
L'utilisation d'une valeur unique pour la largeur de la bordure appliquera la même largeur de bordure aux quatre côtés. Si nous transmettons deux valeurs, il traitera la première valeur comme la largeur des bordures supérieure et inférieure et la deuxième valeur comme la largeur des bordures gauche et droite.
Grammaire
Les utilisateurs peuvent utiliser la propriété CSS "border-width" pour définir la largeur de la bordure selon la syntaxe ci-dessous.
border-width: top right bottom left; border-width: top-bottom right-left; border-width: top-bottom-right-left;
Dans la syntaxe ci-dessus, nous définissons d'abord différentes largeurs pour tous les côtés. Après cela, nous définissons différentes largeurs pour le haut, le bas, la gauche et la droite, puis définissons la même largeur de bordure pour tous les côtés.
Exemple
Dans l'exemple ci-dessous, nous avons créé un élément div et défini une largeur de bordure "5px" pour l'élément border. Dans la sortie, l’utilisateur peut observer une bordure rouge en pointillé.
<html>
<style>
div {
border-style: dashed;
border-width: 5px;
border-color: red;
width: 600px;
height: 100px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet. </h3>
<div>
Welcome to the world of CSS.
</div>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, nous utilisons la propriété CSS « border-width » pour définir différentes largeurs de bordure pour les quatre côtés de l'élément. Nous définissons une largeur de "5px" pour la bordure supérieure, une largeur de "10px" pour la bordure droite, une largeur de "15px" pour la bordure inférieure et une largeur de "20px" pour la bordure gauche
Dans la sortie, l'utilisateur peut observer les différentes largeurs de bordure de chaque côté de l'élément div.
<html>
<style>
div {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
width: 600px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet </h3>
<div>
<p> top border - 5px; </p>
<p> right border - 10px; </p>
<p> bottom border - 15px; </p>
<p> left border - 20px; </p>
</div>
</body>
</html>
Utilisez la propriété CSS border pour définir la largeur de la bordure
La propriété CSS « border » prend trois valeurs. La première valeur spécifie la largeur de la bordure, la deuxième valeur spécifie le style de la bordure et la troisième valeur spécifie la couleur de la bordure.
Ici, nous nous concentrerons sur la première valeur qui définit la largeur de la bordure.
Grammaire
Les utilisateurs peuvent définir la largeur de la bordure à l'aide de la propriété CSS "border" selon la syntaxe suivante.
border: 1rem solid blue;
Exemple
Dans l'exemple ci-dessous, la valeur « 1rem Solid blue » de la propriété CSS « border » définit une bordure de 1rem de largeur, de style rouge et de couleur unie. Pour modifier la largeur de la bordure, nous devons modifier la première valeur.
<html>
<style>
div {
border: 1rem solid blue;
width: 500px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border CSS property </i> to set the border width of the elemenet </h3>
<div>
You are on the TutorialsPoint website!
</div>
</body>
</html>
Exemple
En CSS, nous pouvons également définir la largeur de la bordure en utilisant les valeurs « fines », « moyennes » et « épaisses ». La valeur « fine » définit une bordure fine, la valeur « moyenne » définit une largeur de bordure plus large que la bordure « fine » et la valeur « épaisse » définit une largeur plus large que « moyenne ».
Dans l'exemple ci-dessous, nous avons pris trois éléments div et donné différentes largeurs de bordure en utilisant la propriété CSS « border » que l'utilisateur peut observer dans la sortie.
<html>
<style>
p {
width: 200px;
height: 100px;
margin: 10px;
}
.first {
border: thin solid black;
}
.second {
border: medium solid black;
}
.third {
border: thick solid black;
}
</style>
<body>
<h3> Use the <i> border CSS property </i> to set the border width of the HTML element </h3>
<p class="first"> Thin border </p>
<p class="second"> Medium border </p>
<p class="third"> Thick border </p>
</body>
</html>
Définissez la largeur de la bordure d'un côté spécifique
La propriété CSS « border-top-width » permet à l'utilisateur de définir la largeur de la bordure supérieure. De plus, les utilisateurs peuvent utiliser les propriétés CSS "border-right-width", "border-bottom-width" et "borderleft-width" pour définir respectivement la largeur de la bordure droite, de la bordure inférieure et de la bordure gauche de l'élément.
Grammaire
Les utilisateurs peuvent utiliser différentes propriétés CSS pour définir la largeur de la bordure des différents côtés selon la syntaxe ci-dessous.
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 12px;
Exemple
Dans l'exemple ci-dessous, nous avons créé quatre éléments div différents. Nous définissons la largeur de la bordure supérieure pour le premier élément div, la largeur de la bordure droite pour le deuxième élément div et les largeurs des bordures inférieure et gauche pour les troisième et quatrième éléments.
<html>
<style>
div {
width: 500px;
height: 100px;
margin: 10px;
}
.one {
border-top-width: 3px;
border-style: dotted;
border-color: red;
}
.two {
border-right-width: 6px;
border-style: solid;
border-color: green;
}
.three {
border-bottom-width: 9px;
border-style: dashed;
border-color: blue;
}
.four {
border-left-width: 12px;
border-style: double;
border-color: yellow;
}
</style>
<body>
<h2> Set the border width for the different sides of the element</h2>
<div class="one"> First div </div>
<div class="two"> Second div </div>
<div class="three"> Third div </div>
<div class="four"> Fourth div </div>
</body>
</html>
Conclusion
Les utilisateurs ont appris à utiliser diverses propriétés CSS pour définir la largeur de la bordure des éléments HTML. Nous avons appris à utiliser les propriétés CSS « border-width » et « border » pour définir la largeur de la bordure. De plus, nous avons appris à définir différentes largeurs de bordure pour différents côtés de l'élément.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!