Définir la bordure intérieure en CSS

1. Utilisez la propriété box-sizing pour définir la bordure intérieure en CSS
2. Utilisez la propriété box-shadow pour définir la bordure intérieure en CSS
3. Utilisez les propriétés outline et outline-offset pour définir la bordure intérieure en CSS

Dans cet article, nous allons présenter des méthodes pour définir des bordures à l’intérieur d’un conteneur en CSS. La bordure à l’intérieur d’un conteneur est appelée bordure intérieure.

Utilisez la propriété box-sizing pour définir la bordure intérieure en CSS

Lorsque nous ajoutons une bordure ou un rembourrage à un élément à l’intérieur d’un conteneur, la taille du conteneur augmentera. La taille sera différente de la taille initiale. Pour éliminer le problème, nous pouvons ajouter une bordure intérieure au conteneur.

La bordure intérieure est un espace créé entre la bordure et la propriété ou l’élément de contour. Nous pouvons appliquer une bordure intérieure au contenu du tableau, aux images et au texte des paragraphes et des en-têtes. Une bordure intérieure peut être de n’importe quelle forme comme rectangulaire, carrée, circulaire, etc.

La bordure intérieure n’augmentera pas la taille du conteneur et la taille prédéfinie sera constante. Nous pouvons utiliser la propriété box-sizing pour créer une bordure intérieure en CSS. La définition de la propriété box-sizing sur border-box inclura la bordure et le remplissage dans la dimension du conteneur.

Par exemple, stylisez un div en définissant la propriété box-sizing sur border-box. Réglez la hauteur et la largeur de div sur 200px. Ensuite, créez une bordure solid de largeur 10px et de couleur red. Ensuite, définissez la propriété background sur green.

Ici, nous avons créé un div avec des dimensions de 200x200 px. Même si nous avons ajouté une bordure de 10px, la dimension du conteneur n’a pas changé. La frontière se trouve à l’intérieur du conteneur. Ainsi, nous pouvons utiliser la propriété box-sizing pour définir la bordure intérieure en CSS.

Exemple de code :

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

Utilisez la propriété box-shadow pour définir la bordure intérieure en CSS

Une autre façon d’obtenir la bordure intérieure est d’utiliser la propriété CSS box-shadow. En utilisant la propriété, nous pouvons spécifier l’ombre incrustée qui ressemblerait à une bordure intérieure plutôt qu’à une ombre.

Nous pouvons définir les valeurs de décalage horizontal et vertical pour box-shadow comme les deux premières valeurs. Les trois autres valeurs, flou, étalement et couleur, sont facultatives. Nous pouvons définir le rayon de propagation à la valeur souhaitée pour créer une ombre. Ensuite, l’utilisation de l’option inset changera l’ombre extérieure en ombre intérieure. L’ombre tombera à l’intérieur du conteneur. Enfin, cela ressemble à une bordure intérieure.

Par exemple, définissez les propriétés height et width de div sur 200px. Définissez la couleur d’arrière-plan sur le vert. Ensuite, utilisez la propriété box-shadow et définissez les trois premières options sur 0px. Définissez le rayon de propagation, la quatrième option sur 10px. Donnez la couleur rouge et activez l’option inset.

Ici, nous avons créé une bordure intérieure d’une largeur de 10px en utilisant la propriété box-shadow.

Exemple de code :

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

Utilisez les propriétés outline et outline-offset pour définir la bordure intérieure en CSS

Nous pouvons définir la bordure intérieure en utilisant les propriétés outline et outline-offset en CSS. La propriété outline décrit la taille, le type et la couleur de la bordure de l’élément. La propriété outline-offset décrit la distance ou l’espace entre la bordure et l’élément de contour.

Par exemple, définissez la hauteur et la largeur du div sur 200px. Donnez la couleur verte comme arrière-plan. Ensuite, définissez contour comme 5px solid red. Ensuite, définissez outline-offset sur -5px.

Ici, la propriété outline crée une bordure extérieure dans le conteneur. Utiliser la propriété outline-offset et la définir sur la valeur négative de la largeur de la bordure changera la bordure extérieure en bordure intérieure.

Exemple de code :

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>