This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Rohan K
Posted Feb 16 - Read on Facebook

[SOLVED] every time i add a border to layers imported from sketch, the images shrink just a tiny bit to accommodate the border. the reverse happens when the borders is removed. Is there anyway i can have the border not affect the layer image? i tried css box-sizing property, but that makes the layer's position move when border is applied

2 Comments

Jonas Treub

Browsers decrease an HTML its content size when adding a border. The easiest solution is to add a child layer which overlays the border without changing the content size. A utility function like this might be helpful:

addBorder = (layer, color = "0af", width = 10) => (border = new Layer(parent: layer,
size: layer,
borderRadius: layer.borderRadius,
backgroundColor: null,
borderColor: color,
borderWidth: width
))

Rohan K

just implemented this code today...worked like a charm...thanks a bunch :D

Read the entire post on Facebook