Les développeurs peuvent appliquer plusieurs propriétés CSS pour rendre leurs pages Web plus attrayantes, comme ' hauteur ' et ' largeur ' propriétés pour définir la taille, ' aligner le texte ' pour ajuster le texte, ' style de bordure ' et ' rayon de bordure ” Propriétés pour définir la bordure autour de l'élément. De plus, vous pouvez ajouter une bordure en fonction de vos besoins, par exemple sur un côté de l'élément, uniquement pour rendre les choses derrière les objets plus visibles.
Ce billet démontrera :
Méthode 1 : définir la bordure sur un côté
En CSS, les utilisateurs peuvent définir la bordure d'un côté de l'élément souhaité. A cet effet, le « bordure-gauche ”, “ bordure droite ”, “ border-top ' et ' Bordure du bas ” Les propriétés sont utilisées pour ajouter des bordures à gauche, à droite, en haut ou en bas.
Dans cette section, nous définirons spécifiquement la bordure sur le côté gauche du conteneur. Pour ce faire, suivez les instructions ci-dessous.
Étape 1 : Créer un conteneur div
Tout d'abord, créez un conteneur div à l'aide du ' Étape 2 : Insérer un titre Ensuite, utilisez le '< h1> ” tag pour ajouter un titre à l'intérieur du conteneur div. De plus, vous pouvez également utiliser d'autres balises d'en-tête selon les besoins, telles que '< h1> ' à ' < h6> ' Mots clés: Maintenant, accédez au conteneur HTML div et accédez au nom de la classe. Pour ce faire, un sélecteur de classe ' # ” est utilisé avec le nom de la classe. Étape 4 : Insérer la bordure sur un seul côté Après avoir accédé au conteneur div, appliquez les propriétés CSS mentionnées ci-dessous : L'image résultante montre la bordure avec un seul côté : Pour définir la bordure de tous les côtés avec des couleurs différentes, utilisez le code HTML ci-dessus. Ensuite, accédez au conteneur div à l'aide du nom de l'identifiant et du sélecteur : En conséquence, la bordure avec des styles différents de chaque côté sera appliquée : Pour définir la bordure d'un seul côté, créez d'abord un div en utilisant le '
< h1 > Bordure d'un côté h1 >
div >
On peut voir que le conteneur a été créé avec succès :
Étape 3 : Accéder au conteneur div
bordure gauche : 5px solide rouge ;
arrière-plan : RVB ( 56 , 239 , 245 ) ;
marge : 20px 100px ;
largeur : 200 px ; hauteur : 150px
}
Ici:
Méthode 2 : définir une bordure sur tous les côtés avec des styles différents
marge : 80px ;
largeur de bordure : 8px 2px 1px 10px ;
rayon de bordure : 50px ;
border-style : incrustation solide à double pointillé ;
couleur de bordure : rvb ( 40 , 5 , 235 ) RVB ( 238 , 146 , 9 ) RVB ( 255 , 0 , 242 ) RVB ( 19 , 19 , 18 ) ;
}
Dans le code fourni ci-dessus :
Dans cet article, vous avez appris différentes manières de définir la bordure CSS sur un ou plusieurs côtés. Conclusion