How to align borders on element?

Question

I tried this but box-sizing doesn't work.

Flexbox works but then the text is not vertically centered. So I added align-items: center to the div container, but then the situation is the same as in the beginning.

Pseudo elements don't work either.

I would like a pure CSS solution, but please avoid float solutions.

a {
  color: black;
  text-decoration: none;
  display: inline-block;
}
a:first-child {
  padding: 1em;
  border: 0.2em solid #111;
}
a:last-child {
  padding: 1em;
  color: white;
  background-color: black;
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

CODEPEN

Set box-sizing property to border-box. Answer:[enter link description here](http://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge//) — Danish, Dec 12 '16 at 18:12
box-sizing can only have an effect if you specify width and height in the first place. Here you didn't, but let the element dimensions be determined by their content and padding only. But why not simply add a border of the same width, and with same color as the background to the second link? Achieves the same effect ... — CBroe, Dec 12 '16 at 18:12
Why not just set a black border on the second button? `border:0.2em solid #000;` http://codepen.io/anon/pen/NbLzML — j08691, Dec 12 '16 at 18:13
Oh... ok I never thought about that ._. thanks for the solution @j08691 — GhostOrder, Dec 12 '16 at 18:30
@nevermind Another simple solution, seriously I don't know how I did not think about that, thanks buddy! — GhostOrder, Dec 12 '16 at 18:32

score 3 · Answer 1 · answered Dec 12 '16 at 18:13

3

use a inset box shadow

a{
  color:black;
  text-decoration:none;
  display:inline-block;
}
a:first-child{  
  padding:1em;   
  box-shadow: inset 0 0 0 0.2em black;
}
a:last-child{
  padding:1em;
  color:white;  
  background-color:black;  
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

answered Dec 12 '16 at 18:13

vals

61,425
11
89
138

Although there is a couple of simple solutions I like this too, but is there a way to remove that small gray line? – GhostOrder Dec 12 '16 at 18:35
The small gray line is caused by a non-integer size. 0.2em is equivalent to 3.2px. Border width is by default truncated by the browser, shadows are rendered with anti-aliasing. May be you cant set the size in pixels ? (As a side note, it disappears for a size of exactly 3px => 0.1875em in your case) – vals Dec 12 '16 at 19:39

Michael Benjamin · Accepted Answer · 2016-12-12T21:40:50.303

Here's a quick and easy fix:

You have the black border rule applied to just one box:

a:first-child {  
    padding: 1em;   
    border: 0.2em solid #111;
}

Instead, apply the rule to both boxes:

a {
  color:black;
  text-decoration: none;
  display: inline-block;
  border: 0.2em solid #111;
}
a:first-child {  
  padding:1em;   
}
a:last-child {
  padding: 1em;
  color: white;  
  background-color: black;  
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

score 2 · Answer 3 · answered Dec 12 '16 at 23:10

Transparent border color

a {
  display: inline-block;
  text-decoration: none;
  padding:1em;
  border: 3px solid;
}
a:first-child {  
  color: #000;
}
a:last-child {
  color:white;
  background-color:black;
  border-color: transparent;
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

How to align borders on element?

3 Answers3