Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter de largeur de bordure à toute la largeur de l'élément?

101

Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter de largeur de bordure à toute la largeur de l'élément?

Comme dans Photoshop, nous pouvons donner un trait - à l'intérieur, au centre et à l'extérieur

Je pense que les propriétés de bordure CSS par défaut sont au centre comme au centre dans Photoshop, ai-je raison?

Je veux donner une bordure à l'intérieur de la boîte et non à l'extérieur. et ne voulez pas inclure la largeur de la bordure dans la largeur de la boîte.

Jitendra Vyas
la source

Réponses:

221
outline:1px solid white;

Cela n'ajoutera pas la largeur et la hauteur supplémentaires.

Abenson
la source
10
Remarque: le contour ne définit pas les côtés, donc cela ne fonctionne que si tous les côtés sont stylisés.
Screenack
1
J'ai ajouté une réponse qui vous permet de délimiter un seul côté.
mikevoermans
1
Juste une note qui ne suivra pas les courbes de tout rayon de bordure que vous pourriez avoir sur l'élément, vous vous retrouverez donc avec une bordure carrée.
limitlessloop
2
Mais il ne supporte pas radieux.
Sky
29

Découvrez le dimensionnement des boîtes CSS ...

La propriété CSS3 box-sizing peut le faire. La valeur de la zone de bordure (par opposition à la valeur par défaut de la zone de contenu) fait de la zone de rendu finale la largeur déclarée, et toute bordure et remplissage coupés à l'intérieur de la zone. Vous pouvez maintenant déclarer en toute sécurité votre élément comme ayant une largeur de 100%, y compris le remplissage et la bordure basés sur les pixels, et atteindre parfaitement votre objectif.

  • -webkit-box-sizing: border-box; / * Safari / Chrome, autre WebKit * /
  • -moz-box-sizing: border-box; / * Firefox, autre Gecko * /
  • box-dimensionnement: border-box; / * Opera / IE 8+ * /

Je vous suggère de créer un mixin pour gérer cela pour vous. Vous pouvez trouver plus d'informations sur le dimensionnement des boîtes sur W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Tchad
la source
1
C'est la meilleure réponse, même si je ne pense pas que vous ayez vraiment besoin de tous les préfixes. caniuse.com/#feat=css3-boxsizing
Justin
2
^ Justin a raison, vous n'avez plus besoin des préfixes. box-sizingsuffira.
Tchad
26

En fonction de la prise en charge de votre navigateur, vous pouvez utiliser la box-shadowpropriété.

Vous pouvez définir la valeur de flou sur 0 et l'étalement sur quelle que soit l'épaisseur que vous recherchez. L'avantage de Box Shadow est que vous pouvez contrôler si elle est dessinée à l'extérieur (par défaut) ou à l'intérieur (en utilisant la insetpropriété).

Exemple:

box-shadow: 0 0 0 1px black; // Outside black border 1px

ou

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

L'un des grands avantages de l'utilisation de l'ombre de boîte est que vous pouvez faire preuve de créativité en utilisant plusieurs ombres de boîte:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

La seule chose que je ne peux pas dire, c'est quelle différence cela fera en termes de performances de rendu. Je suppose que cela pourrait devenir un problème si vous aviez des centaines d'éléments utilisant cette technique à la fois à l'écran.

James Bryant
la source
16

J'ai rencontré le même problème.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Cette réponse vous permet de spécifier un seul côté. Et fonctionnerait dans IE8 + - contrairement à l'utilisation de box-shadow.

Bien sûr, modifiez les propriétés de vos pseudo éléments car vous devez distinguer un côté spécifique.

* Nouveau et amélioré *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Cela permet d'utiliser la bordure et de toucher plusieurs côtés d'une boîte.

mikevoermans
la source
8

À utiliser box-sizing: border-boxpour créer une bordure À L'INTÉRIEUR d' un div sans modifier la largeur de div.

Permet outlinede créer une bordure À L'EXTÉRIEUR d' un div sans modifier la largeur de div.

Voici un exemple: https://jsfiddle.net/4000cae9/1/

Remarques: border-boxactuellement, il n'est pas pris en charge par IE

Soutien:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
GibboK
la source
6

Comme l'a dit Abenson, vous pouvez utiliser un contour, mais un inconvénient est qu'Opera pourrait dessiner une "forme non rectangulaire". Une autre option qui semble fonctionner consiste à utiliser des marges négatives, comme ce css:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

Avec ce html:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Une autre option moins propre consiste à ajouter un balisage supplémentaire au html. Par exemple, vous définissez la largeur d'un élément extérieur et ajoutez la bordure à l'intérieur. Le CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

Et le html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>
ChrisD
la source
3

Utilisez un remplissage lorsqu'il n'y a pas de bordure. Supprimez le rembourrage lorsqu'il y a une bordure.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Essentiellement, remplacez simplement le remplissage 2px par des bordures 2px. La taille de div reste la même.

Jake Wilson
la source
2

Dans votre cas, pouvez-vous le fudger en soustrayant la moitié de la bordure du rembourrage? (-2,5 à partir du remplissage si votre bordure mesure 5px de large, vous ne pouvez pas avoir de remplissage négatif, donc pour aller plus petit, réduisez la largeur totale de la boîte). Vous pouvez ajouter 2,5 pixels supplémentaires à la marge pour conserver la même taille de la boîte globale.

Je n'aime vraiment pas cette suggestion, mais je ne pense pas qu'il y ait un moyen de gérer cela proprement.

vfilby
la source
0

Une autre option, si votre couleur d'arrière-plan est unie:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}
Jake Wilson
la source
Vous pouvez remplacer #FFFtransparent et alors vous n'avez pas besoin de vous rappeler de changer deux valeurs. Votre suggestion a l'avantage que si vous aviez besoin d'une bordure en pointillés, cela fonctionnerait là où il box-shadowmanque à cet égard.
limitlessloop
0

contour: 3px noir uni || bordure: 3px noir uni

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>

Matan Shushan
la source