Dans HTML, pour dessiner ou placer les bordures à l'intérieur d'un conteneur Div, il existe une méthode simple. Les utilisateurs peuvent utiliser le CSS "frontière"Propriété et déplacez-le dans la boîte de l'élément à l'aide du CSS"boîte ombre»Propriété avec une valeur d'encart et définissez la valeur. En outre, "Taille de boîte"Est utilisé pour définir la taille de la boîte et la valeur"borne»Comprend le rembourrage et la bordure de la largeur et de la hauteur de l'élément.

Ce message expliquera la procédure pour placer la bordure à l'intérieur de la div et non sur son bord.

Comment placer la bordure à l'intérieur de Div et non sur son bord?

Pour placer la bordure à l'intérieur de la div et non sur son bord, essayez la procédure mentionnée.

Étape 1: insérer

Tout d'abord, ajoutez une rubrique à l'aide d'une étiquette de cap de "

" pour "

". Pour ce faire, le

La balise est utilisée:

Linuxhint Ltd UK

Étape 2: Faire un conteneur div

Ensuite, utilisez le «”Tag pour faire un conteneur. Insérez également l'attribut de classe à l'intérieur de la balise d'ouverture div. Les utilisateurs peuvent également ajouter plusieurs attributs de classe dans le conteneur div unique en attribuant des noms à un attribut de classe. Par exemple, nous définirons trois noms de classe différents dans un conteneur "boîte","cercle", et "frontière»:

Étape 3: En-tête de style

Ensuite, accédez à l'en-tête et appliquez différentes propriétés CSS pour le style:

H1
Style de police: italique;
Couleur bleue;

Ici:

• "le style de police»La propriété spécifie le style de police comme«italique".
• "couleur"Est utilisé pour régler la couleur de cap comme"bleu".

Étape 4: Style «Box» Classe

Maintenant, accédez au «.boîte»Classe en utilisant le sélecteur de points. Ensuite, appliquez les propriétés CSS suivantes:

.boîte
hauteur: 160px;
Largeur: 160px;
Contexte: RVB (161, 229, 250);
marge: 20px 50px;

Selon l'extrait de code donné:

• "hauteur»Définit la taille de l'élément verticalement.
• "largeur»La propriété alloue une largeur spécifique à l'élément.
• "arrière-plan»La propriété définit une couleur spécifique sur l'arrière-plan de l'élément.
• "marge»Définit les espaces autour de l'élément.

Sortir

Étape 5: Style «Border» Classe

Utilisez le «.frontière«Pour accéder à la deuxième classe et appliquer des propriétés répertoriées ci-dessous:

.frontière
Border: 20px RVB solide (161, 229, 250);
Dimensionnement en boîte: Border-Box;
Box-shadow: inset 0px 0px 0px 12px RGB (15, 15, 15);

Ici:

• "frontière»La propriété définit une frontière en dehors de l'élément.
• "Taille de boîte"Est utilisé pour définir la taille de la boîte et la valeur"borne»Comprend le rembourrage et la bordure de la largeur et de la hauteur de l'élément.
• "boîte ombre»La propriété insère une ombre à l'extérieur d'un élément. Pour ce faire, le «enrout«La valeur est définie avec une couleur spécifique comme«RVB (15, 15, 15)".

Sortir

Étape 6: Classe de style «cercle»

Accédez à la troisième classe en utilisant son «.cercle»:

.cercle
Border-Radius: 50%;

Ensuite, appliquez le «rayon frontalier”Propriété pour rendre la courbe ronde de tous les côtés. Plus précisément, il sera utilisé pour rendre le coin de la bordure externe autour de la forme d'un élément. Les utilisateurs peuvent créer des coins circulaires à l'aide d'un seul rayon ou coins elliptiques avec deux rayons.

Sortir

Il s'agissait de placer la frontière à l'intérieur de la div et non sur son bord.

Conclusion

Pour placer la bordure à l'intérieur de la div et non sur son bord, créez d'abord un conteneur Div à l'aide de «". Ensuite, ajoutez une bordure en utilisant le "frontière«Propriété et utilisez»dimensionnement en boîte”Pour définir la taille de la boîte. Sa valeur comprend une bordure et un rembourrage dans la largeur et la hauteur de l'élément. Après cela, utilisez le «boîte ombre»Propriété qui insère une ombre à l'extérieur d'un élément. Cet article a démontré la procédure pour placer la bordure à l'intérieur d'une div mais pas sur son bord.