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
How-to-create-editable-and-scalable-inset-borders-using-Photoshop 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
  • On INNER SHADOW; 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%
InnerShadow 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