Bordure extérieure CSS

Question

Je veux pouvoir dessiner une bordure à l'EXTÉRIEUR de ma Div ! Donc si ma div est disons de 20px par 20px, je veux une bordure de 1px à l'extérieur de celle-ci (donc en fait, j'obtiens une div de 22x22px de large).

Je comprends que je peux simplement faire le div 22x22 pour commencer, mais pour des raisons que j'ai, j'ai besoin que les bordures soient à l'extérieur.

CSS outline fonctionne, mais je ne veux qu'un truc de type border-bottom ou border-top, donc quelque chose comme outline-bottom, qui ne fonctionne pas, est ce que je veux.

Existe-t-il un moyen de le faire ?

Gracias

Answer 1

Très en retard, mais je viens de rencontrer un problème similaire.
Ma solution était les pseudo-éléments - pas de balisage supplémentaire, et vous pouvez dessiner la bordure sans affecter la largeur.
Positionnez le pseudo-élément de manière absolue (le principal étant positionné de manière relative) et le tour est joué.

Voir ci-dessous, JSFiddle ici .

.hello {
    position: relative;
    /* Styling not important */
    background: black;
    color: white;
    padding: 20px;
    width: 200px;
    height: 200px;
}

.hello::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
    z-index: -1;
}

Answer 2

Placez votre div à l'intérieur d'une autre div, appliquez la bordure à la div extérieure avec n la quantité d'espacement/de marge où n est l'espace que vous voulez entre les deux.

Answer 3

Essayez d'ajouter

box-sizing: content-box;

(au lieu de box-sizing: border-box; )