How To Create A Framed Border with CSS

November 7, 2019

Recently I wanted to create a page that was split in half with an image on the left and the content on the right, and I wanted there to be a border that wrapped around both sides, but was inset from the content, like a picture frame.

Apparently all it takes is two lines of code to inset the border on a parent element.

outline: 5px solid #eee;
outline-offset: -50px;

See the Pen Inset Global Border by Isaac Vazquez (@isaachvazquez) on CodePen.