Figma Support Forum

Partial CSS border support (independent borders for sides)

  1. I could really use it every time I design in Figma since that’s a normal feature to use what I do when I’m coding. It makes sense to have it as Figma is essentially a web design tool, and it would be great if some simple features from the CSS can follow that. :slight_smile:

  2. I would expect something “simple” like this. Use the box-sizing model to keep the borders from expanding outside of their box. That way they wouldn’t affect the auto-layout function.

So, I hope this would be just the beginning of this idea. Any thoughts and additional comments are more than welcome!

18 Likes

Yes, this is much better than using effect styles. Hope this feature comes soon…

4 Likes

Good idea on this! What if it was just combined in the existing stroke options, similar to autolayout? Would that get the same result?

12 Likes

That looks super neat

It would be really nice to see the border support more in line with the css border. Maybe a combination of the two would be nicest. So have a quick option to fill in, but also the possibility to extend the screen and have more options.

2 Likes

This is something that looks also promising. Some concerns were placed earlier on Figma Slack regarding the CSS ono-on-one translation to Figma. I would love to hear more from Figma team.

2 Likes

It would be really great to have this, so when designing a table row (for example) the border could match normal CSS rather than as a 1px drop shadow

3 Likes

Can’t you use drop shadow for that?

You can use inner shadow, but it’s a hack… I do it, but it’s not a true border. Figma has bridged the gap between browser and design tool with auto layout, so this feature could be something we could use a lot.

4 Likes

+1. A very useful feature. Right now I have to use the inner shadow hack, but it feels so wrong… :grinning:

2 Likes

At the moment if you want to have a stroke on 1,2 or 3 sides of a shape - something incredibly common in CSS - you’re out of luck (as far as I can tell) meaning you have to resort to something like shadows or delicate positioning to hack it.

Adding something close to the behaviour of CSS would be ideal - which would be controlling the weight, colour and stroke style of each side. But failing that - just being able to turn off top, right, bottom or left strokes would do the job.

Am I missing something here?

I would love this feature so much. The current process of effect styles or unique rectangles for borders can be a friction point for devs reviewing designs. Not to mention when we use themer to switch over to a dark environment, effect styles aren’t updated (and we have to create a separate set of effect styles for this)….It’s a pain.

To my mind, it’s not so simple because we are working with vector shapes and not only boxes for example what will happen if you try to put a right border on a star?

As an old designer who have always work with this hack in Illustrator, Fireworks, Sketch… I understand why it can’t be done. It won’t be surprising me if Figma only allow this features on frames.

It’s not because figma is browser compatible that it use a render engine compatible with CSS display

I agree, and ofc this is not intended for SVG objects, the support for frames and auto layout would be awesome :slight_smile:

Then it should only be allowed on frames and not any shape, just like other features. Same exact thing is true on the web. You can’t add a border to a complex SVG shape, it will just add the border to the svg element rectangle itself. That is fine.

I think one of Figma’s core issues is that it doesn’t use HTML and CSS as a renderer and therefore will painfully lag behind and have to tediously recreate all these fairly basic features from the web.