¿Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?

101

Como en Photoshop, podemos dar trazos: adentro, centro y afuera

Creo que las propiedades de borde CSS predeterminadas están centradas como centro en Photoshop, ¿verdad?

Quiero dar un borde dentro de la caja, no afuera. y no desea incluir el ancho del borde en el ancho del cuadro.

css Jitendra Vyas
fuente

221

outline:1px solid white;

Esto no agregará el ancho y la altura adicionales.

abenson
fuente

10

Nota: el contorno no define los lados, por lo que esto solo funciona si todos los lados tienen estilo.

Screenack

1

Agregué una respuesta que le permite bordear solo un lado.

mikevoermans

1

Solo una nota que no seguirá las curvas de ningún radio de borde que pueda tener en el elemento, por lo que terminará con un borde cuadrado.

Limitlessloop

2

Pero no admite radios.

Sky

29

Mira el tamaño de caja de CSS ...

La propiedad CSS3 de tamaño de caja puede hacer esto. El valor del cuadro de borde (a diferencia del valor predeterminado del cuadro de contenido) hace que el cuadro renderizado final tenga el ancho declarado y cualquier borde y relleno se corten dentro del cuadro. Ahora puede declarar de forma segura que su elemento tiene un ancho del 100%, incluido el relleno y el borde basados en píxeles, y lograr su objetivo a la perfección.

-webkit-box-sizing: border-box; / * Safari / Chrome, otro WebKit * /
-moz-box-sizing: border-box; / * Firefox, otro Gecko * /
tamaño de caja: caja de borde; / * Opera / IE 8+ * /

Sugeriría crear un mixin para manejar esto por ti. Puede encontrar más información sobre el tamaño de las cajas en W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Chad
fuente

1

Esta es la mejor respuesta, aunque no creo que realmente necesite todos los prefijos. caniuse.com/#feat=css3-boxsizing

Justin

2

^ Justin tiene razón, ya no necesitas los prefijos. box-sizingSerá suficiente.

Chad

25

Dependiendo de la compatibilidad de su navegador, puede utilizar la box-shadowpropiedad.

Puede establecer el valor de desenfoque en 0 y la extensión al grosor que desee. Lo mejor de la sombra del cuadro es que puede controlar si se dibuja afuera (por defecto) o adentro (usando la insetpropiedad).

Ejemplo:

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

o

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

Una gran ventaja de usar la sombra de caja es que puede ser creativo usando varias sombras de caja:

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

Lo único que no puedo decir es la diferencia que esto hará que el rendimiento del renderizado sea sabio. Asumiría que podría convertirse en un problema si tuviera cientos de elementos usando esta técnica en la pantalla a la vez.

James Bryant
fuente

16

Me encontré con el mismo problema.

.right-border {
    position: relative;
}

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

Esta respuesta le permite especificar un solo lado. Y funcionaría en IE8 +, a diferencia de usar box-shadow.

Por supuesto, cambie las propiedades de sus pseudo elementos ya que necesita seleccionar un lado específico.

* Nuevo y mejorado *

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

Esto permite la posibilidad de usar bordes y golpear varios lados de una caja.

mikevoermans
fuente

8

Úselo box-sizing: border-boxpara crear un borde DENTRO de un div sin modificar el ancho del div.

Úselo outlinepara crear un borde FUERA de un div sin modificar el ancho del div.

Aquí un ejemplo: https://jsfiddle.net/4000cae9/1/

Notas: border-boxactualmente no es compatible con IE

Apoyo:

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
fuente

6

Como dijo Abenson, puedes usar un contorno, pero un problema es que Opera podría dibujar una "forma no rectangular". Otra opción que parece funcionar es usar márgenes negativos, como este css:

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

}

Con este html:

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

Otra opción menos limpia es agregar un marcado adicional al html. Por ejemplo, establece el ancho de un elemento exterior y agrega el borde al interior. El CSS:

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

Y el html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

ChrisD
fuente

3

Use relleno cuando no haya borde. Retire el relleno cuando haya un borde.

.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;
}

Esencialmente, simplemente reemplace el relleno de 2px con bordes de 2px. El tamaño de div sigue siendo el mismo.

Jake Wilson
fuente

2

En su caso, ¿puede modificarlo restando la mitad del borde del relleno? (-2,5 del relleno si su borde tiene 5 px de ancho, no puede tener un relleno negativo, por lo que para reducirlo, reduzca el ancho total del cuadro). Puede agregar 2.5px adicionales al margen para mantener el cuadro general del mismo tamaño.

Realmente no me gusta esta sugerencia, pero no creo que haya una manera de manejar esto limpiamente.

vfilby
fuente

1

Por lo tanto, ¿está tratando de lograr lo mismo que el conocido error del modelo de caja de IE ? Eso no es posible. O desea admitir clientes con IE solo en Windows y elegir un tipo de documento que obligue a IE a entrar en modo peculiar .

BalusC
fuente

0

Otra opción, si su color de fondo es sólido:

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
fuente

Puede sustituirlo #FFFpor transparente y luego no es necesario que recuerde cambiar dos valores. Su sugerencia tiene la ventaja de que si necesitara un borde punteado, esto funcionaría donde box-shadowfalte en este sentido.

Limitlessloop

0

contorno: 3px negro sólido || borde: 3px negro sólido

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

}

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

<div>
hello world
</div>

Expandir fragmento

Matan Shushan
fuente

¿Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?

Respuestas: