Le style d'un site Web HTML est contrôlé par CSS, qui est également une partie fondamentale de HTML. L'une des propriétés de style fournies par CSS est le «frontière" propriété. La plupart des frontières sont créées à l'extérieur des éléments, mais CSS nous permet d'insérer une bordure à l'intérieur d'un élément à l'aide de différentes propriétés, qui sont la boîte à boîte, le contour et la taille d'une boîte.

Dans cet article, nous apprendrons la procédure pour placer les frontières à l'intérieur du div en utilisant:

• Propriété Box-Shadow
• contour avec une propriété de compensation
• propriété de dimensionnement en boîte

Alors, commençons!

Méthode 1: Placez une bordure à l'intérieur d'une div à l'aide de la propriété «Box-Shadow»

Nous pouvons placer une bordure à l'intérieur de la div en utilisant le «boîte ombre" propriété. Donc, tout d'abord, parcourez la propriété Box-Shadow et ses fonctionnalités.

Qu'est-ce que la propriété «Box-Shadow»?

Dans CSS, le «boîte ombre»La propriété nous permet de définir une ombre sur n'importe quel élément ou image. Cette propriété est basée sur les valeurs suivantes:

• Offset-X: Il est utilisé pour ajouter une ombre horizontale.
• Offset-y: Il est utilisé pour ajouter une ombre verticale.
• couleur: Il est utilisé pour placer la couleur de l'ombre.

Syntaxe

Pour clarifier ces points, passons à la syntaxe de la propriété Box-Shadow:

Box-Shadow: Offset-X Offset-Y Blur-Radius Spread Color Inset;

Voici la description liée aux valeurs susmentionnées:

• "offset-x" et "compensé«Peut être positif ou négatif.
• "rampe de flou"Rend l'ombre plus lumineuse ou plus légère.
• En utilisant "diffuser», Vous pouvez régler la taille de l'ombre.
• À la place de "couleur», Vous affecterez toute couleur que vous souhaitez donner à l'image.
• "enrout”Est ​​utilisé pour définir l'ombre à l'intérieur de l'élément. Si vous ne l'utilisez pas, une ombre apparaîtra en dehors de la boîte.

Note: "rampe de flou","diffuser", et "enrout«Sont les valeurs facultatives de la propriété Box-Shadow. Vous pouvez utiliser ces valeurs dans certains cas spéciaux.

Pour une meilleure compréhension de l'utilisation de la propriété Box-Shadow, mettons en œuvre un exemple pratique.

Exemple

Dans la section HTML, nous créerons un conteneur à l'aide d'une balise et d'une rubrique

à l'intérieur.

Html

"Border solide à l'intérieur du div"

Ensuite, dans le fichier CSS, nous utiliserons "div«Pour accéder à la div déjà créée et placer la bordure à l'intérieur de celui-ci en suivant les instructions données:

• Réglez la largeur et la hauteur de la div comme «700px" et "250px".
• Spécifiez la couleur du texte comme «RVB (13, 214, 214)".
• Définissez les valeurs d'alignement du texte à l'aide de la propriété Line-Height comme «200px»Et la propriété textuelle en tant que«centre".
• En utilisant la propriété d'arrière-plan, définissez la couleur d'arrière-plan de la div comme «noir".
• Créez une bordure à l'aide de la propriété de la frontière avec «15px" largeur, "solide«Forme, et«noir" couleur.
• Pour l'ombre intérieure, utilisez le «boîte ombre»Propriété et définissez la valeur de Offset-X, Offset-y et Blur comme«0px», Settper comme«5px», La couleur de l'ombre comme«RVB (255, 251, 0)" et utilise "enrout«Placer la frontière à l'intérieur du div.

CSS

div
Largeur: 700px;
hauteur: 250px;
Couleur: RVB (255, 238, 0);
Heure de ligne: 200px;
Texte-aligne: Centre;
Contexte: noir;
Border: 15px noir solide;
Box-Shadow: 0px 0px 0px 5px RGB (255, 238, 0) Insrut;

Note: La valeur de Offset-X et Offset-y est définie comme 0 car nous avons besoin de bordures de tous les côtés du div.

Après implémentation du code donné, accédez au fichier HTML et exécutez-le pour voir le résultat suivant:

Note: En augmentant la valeur du «diffuser», Vous pouvez augmenter la largeur de la frontière.

Méthode 2: Placez une bordure à l'intérieur d'une div en utilisant la propriété «contour» et «décrochage»

Le "contour»La propriété est utilisée pour définir la ligne à l'extérieur de l'élément. C'est la propriété serme de «largeur","de style", et "contournement". La syntaxe de la propriété Outline est la suivante:

Aperçu: couleurs de style aperçu des contour

Voici la description liée aux valeurs susmentionnées:

• largeur de ligne: Il est utilisé pour définir la largeur du contour.
• style contour: Il est utilisé pour définir le style du contour.
• Color de contour: Il est utilisé pour spécifier la couleur de contour.

De même, le «décalage»La propriété est utilisée pour définir l'espace entre le bord de l'élément et le contour. Cet espace est transparent. La syntaxe de la propriété Offset Offset est:

Office Office: Valeur

À la place de la valeur, vous pouvez définir l'espace que vous souhaitez définir entre le bord de l'élément et le contour. Il crée un contour à l'intérieur de l'élément lorsqu'une valeur négative est spécifiée.

Passons à l'exemple de la création d'une bordure à l'intérieur du div.

Exemple

Dans cet exemple, nous créerons deux divs avec des noms de classe "div1" et "div2»Et ajoutez une rubrique à l'intérieur en utilisant

étiqueter.

Html

"Border de crête à l'intérieur de la div"

"Double bordure à l'intérieur du div"

Dans CSS, utilisez "div1«Pour accéder au conteneur que nous avons créé dans le fichier html. Pour insérer la bordure à l'intérieur de la div, suivez les instructions données:

• Réglez la largeur et la hauteur de la div comme «500px".
• Ajustez le rayon de la frontière à "50%".
• Réglez la couleur du texte comme «RVB (13, 214, 214)".
• Définissez les valeurs d'alignement du texte à l'aide de la propriété Line-Height comme «500px»Et la propriété textuelle en tant que«centre".
• En utilisant la propriété d'arrière-plan, définissez la couleur d'arrière-plan de la div comme «noir".
• Créez une bordure en utilisant la propriété frontalière comme «15px","solide", et "noir".
• Pour la bordure intérieure, utilisez le «contour»Propriété et définissez la valeur comme«10px","crête", et "RVB (0, 255, 242)»Et définissez la valeur de«décalage" comme "-25px«Placer la frontière à l'intérieur du div.

CSS

.div1
Largeur: 500px;
hauteur: 500px;
Border-Radius: 50%;
Couleur: RVB (13, 214, 214);
hauteur de ligne: 500px;
Texte-aligne: Centre;
Contexte: noir;
Aperçu: 10px Ridge RVB (0, 255, 242);
Offset Offset: -25px;

Pour le style de la deuxième div, changez uniquement le style du contour en utilisant le «contour»Propriété et définissez les valeurs comme suit:

Aperçu: 10px double RVB (0, 255, 242);

Méthode 3: Placez une bordure à l'intérieur d'une div à l'aide de la propriété «dimensionnement de la boîte»

CSS "dimensionnement en boîte»La propriété calcule la largeur et la hauteur de l'élément. La syntaxe de la propriété de taille de boîte est:

dimensionnement en boîte: valeur

À la place de la valeur, vous pouvez définir la valeur de la taille d'une boîte comme «boîte de contenu" et "borne".

Exemple

Dans l'exemple ci-dessous, nous créerons un nom de classe div "div1»Et ajoutez une direction à l'intérieur.

Html

"Bordeau de groove à l'intérieur de la div"

Dans le CSS, nous utiliserons «div1«Pour accéder au div créé. Ensuite, insérez la bordure à l'intérieur de la div comme suit:

• Réglez la largeur et la hauteur de la div comme «550px".
• Réglez la couleur du texte comme «RVB (2, 255, 137)".
• Définissez les valeurs pour l'alignement du texte à l'aide de la propriété line-hauteur comme «420px»Et la propriété textuelle en tant que«centre".
• En utilisant la propriété d'arrière-plan, définissez la couleur d'arrière-plan de la div comme «noir".
• Créez une bordure en utilisant les propriétés des frontières comme «50px","rainure", et "RVB (81, 255, 0)".
• Ensuite, utilisez le «frontière»Propriété et définissez la valeur comme«50px","rainure", et "RVB (81, 255, 0)»Et définissez la valeur de«dimensionnement en boîte" comme "borne«Placer la frontière à l'intérieur du div.

.div1
Largeur: 550px;
Hauteur: 550px;
Couleur: RVB (2, 255, 137);
hauteur de ligne: 420px;
Texte-aligne: Centre;
Contexte: noir;
Border: 30px Groove RGB (81, 255, 0);
Dimensionnement en boîte: Border-Box;

Après implémentation du code donné, vous verrez la sortie suivante:

Nous avons fourni les trois façons les plus simples pour placer une bordure à l'intérieur d'une div utilisant CSS.

Conclusion

Pour placer une bordure à l'intérieur du div, créez d'abord une bordure en utilisant le «frontière«Propriété, puis utilisez le«boîte ombre" et "contour" avec "décalage" et "dimensionnement en boîte»Propriétés de CSS. La propriété frontalière crée une bordure autour de l'élément, et les quatre autres propriétés peuvent être utilisées pour déplacer la bordure à l'intérieur du div. À la suite de cet article, nous vous avons montré les trois méthodes les plus faciles pour placer les frontières à l'intérieur du div.
Pour placer une bordure à l'intérieur du div, créez d'abord une bordure en utilisant le «frontière«Propriété, puis utilisez le«boîte ombre" et "contour" avec "décalage" et "dimensionnement en boîte»Propriétés de CSS. La propriété frontalière crée une bordure autour de l'élément, et les quatre autres propriétés peuvent être utilisées pour déplacer la bordure à l'intérieur du div. À la suite de cet article, nous vous avons montré les trois méthodes les plus faciles pour placer les frontières à l'intérieur du div.