Como dar borda a qualquer elemento usando css sem adicionar a largura da borda a toda a largura do elemento?

Como dar borda a qualquer elemento usando css sem adicionar a largura da borda a toda a largura do elemento?

Como no Photoshop, podemos dar traços- dentro, centro e fora

Acho que as propriedades de borda css padrão estão no centro como no centro no photoshop, estou certo?

Quero dar borda dentro da caixa não fora. e não deseja incluir a largura da borda na largura da caixa.

outline:1px solid white;

Isso não adicionará largura e altura extras.

Verifique o tamanho da caixa CSS ...

A propriedade CSS3 de tamanho de caixa pode fazer isso. O valor da caixa da borda (em oposição ao padrão da caixa de conteúdo) torna a caixa renderizada final a largura declarada e qualquer borda e preenchimento cortado dentro da caixa. Agora você pode declarar com segurança que seu elemento tem 100% de largura, incluindo preenchimento e borda baseados em pixels, e realizar seu objetivo perfeitamente.

• -webkit-box-sizing: border-box; / * Safari / Chrome, outro WebKit * /
• -moz-box-sizing: border-box; / * Firefox, outro Gecko * /
• dimensionamento da caixa: caixa de borda; / * Opera / IE 8+ * /

Eu sugiro criar um mixin para lidar com isso para você. Você pode encontrar mais informações sobre dimensionamento de caixa em W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Dependendo do suporte do navegador pretendido, você pode usar a box-shadowpropriedade.

Você pode definir o valor de desfoque para 0 e a propagação para qualquer espessura que você deseja. A grande vantagem da sombra da caixa é que você pode controlar se ela é desenhada para fora (por padrão) ou para dentro (usando a insetpropriedade).

Exemplo:

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

ou

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

Uma grande vantagem de usar box shadow é que você pode ser criativo usando múltiplas box shadow:

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

A única coisa que não posso dizer é que diferença isso fará no desempenho da renderização. Eu presumiria que isso poderia se tornar um problema se você tivesse centenas de elementos usando essa técnica na tela ao mesmo tempo.

Eu tive o mesmo problema.

.right-border {
    position: relative;
}

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

Esta resposta permite que você especifique um único lado. E funcionaria no IE8 + - ao contrário do uso de box-shadow.

É claro que altere as propriedades dos seus pseudoelementos, pois você precisa selecionar um lado específico.

* Novo e melhorado *

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

Isso permite a capacidade de usar a borda e atingir vários lados de uma caixa.

Use box-sizing: border-boxpara criar uma borda DENTRO de um div sem modificar a largura do div.

Use outlinepara criar uma borda FORA de um div sem modificar a largura do div.

Aqui está um exemplo: https://jsfiddle.net/4000cae9/1/

Observações: border-boxatualmente não é compatível com o IE

Apoio, suporte:

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>

Como disse Abenson, você pode usar um contorno, mas uma pegadinha é que o Opera pode desenhar uma "forma não retangular". Outra opção que parece funcionar é usar margens negativas, como este css:

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

}

Com este html:

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

Uma outra opção menos limpa é adicionar marcação extra ao html. Por exemplo, você define a largura de um elemento externo e adiciona a borda ao interno. O CSS:

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

E o html:

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

Use preenchimento quando não houver borda. Remova o preenchimento quando houver uma borda.

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

Basicamente, basta substituir o preenchimento de 2 px por bordas de 2 px. O tamanho da div permanece o mesmo.

No seu caso, você pode distorcer subtraindo metade da borda do enchimento? (-2,5 do preenchimento se sua borda tiver 5px de largura, você não pode ter preenchimento negativo, portanto, para diminuir, reduza a largura geral da caixa). Você pode adicionar 2,5 px extras à margem para manter a caixa geral do mesmo tamanho.

Eu realmente não gosto dessa sugestão, mas não acho que haja uma maneira de lidar com isso de forma limpa.

Portanto, você está tentando obter o mesmo que o conhecido bug do modelo de caixa do IE ? Isso não é possível. Ou você deseja oferecer suporte a clientes com IE no Windows apenas e escolher um doctype que force o IE em quirksmode .

Outra opção, se a cor de fundo for sólida:

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
}

contorno: 3px totalmente preto || borda: 3px totalmente preto

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

}

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

<div>
hello world
</div>