How to create editable and scalable inset borders using Photoshop (and in CSS)

Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
Share on email
Share on reddit


Working on a recent web project I needed a way to create boxes that are editable and scalable with a 10px inset border using Photoshop. I was wanting to use them as part of the styling on the widgets in a sidebar (WordPress).

I could obviously create two vector/path?boxes?put a border on the one, make it transparent, make it smaller and place it on top. Problem with that is when you re-size it, specifically not proportionally you end up with your spacing on the edges being off and having to manually align them again. Tedious if you have many of these “boxes”.

Perhaps I am using the word “inset” wrong here. Please let me know if there is a better term.

This is how I went about creating these inset border boxes:

  • Using the RECTANGLE TOOL, set to SHAPE,?I dragged my box and filled it with a color (#5b6741).
  • Open the LAYER?panel for the shape (in the?LAYER panel, double click the shape you just created).
  • On STROKE;
    SIZE: 9 px
    POSITION: inside
    BLEND MODE: Normal
    OPACITY: 100%
    FILL TYPE: Color
    COLOR (same as the box color):?#5b6741


    BLEND MODE: Normal
    The color of the Blend mode, set it to the color you want your inset stroke to be, in my case: #efefef
    OPACITY: 100%
    ANGLE: Not Applicable
    DISTANCE: 0px
    CHOKE: 100%
    SIZE: 10px (note, it is 1px more than the STROKE)
    CONTOUR: the first one, that looks like a steep hill
    NOISE: 0%


That should do it.

The CSS:

.widget {
background-color: #5b6741;
padding: 40px;
border-style: solid;
border-width: 9px;
border-color: #5b6741;
box-shadow: inset 0 0 0 1px #F5F5F5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

view more

Scroll to Top