[CSS] box-shodow로 inline으로 border 만들기

box-shadow : inset

border의 경우는 px 을 지정하게 되면,
그만큼의 값이 block 속성에 포함되서 크기가 150px 이라고 하면 151px로 잡히게 된다.
그때는 width:149px; border 만큼의 크기를 width height 에서 빼줘야 하는데,
해당 방법 사용이외에 다른 방법이 뭐가 있을가에 대한 고민으로 찾아본 결과
box-shadow : inset 속성을 사용하면, width 값을 줄이지 않고도 사용 할 수가 있게 된다.

div {

width: 150px;

height: 50px;

background-color: green;

box-shadow: 0 0 0 3px #000 inset;
}

 

See the Pen insetBorder by bottlesun (@bottlesun) on CodePen.