Launched: Partial CSS border support (independent borders for sides)

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

7 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.

7 Likes

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

5 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.

1 Like

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

2 Likes

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

2 Likes

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.

7 Likes

+1

If I recall correctly this was requested on the old Spectrum forum like years ago. Can this really be so hard to implement? I come across the lack of this feature almost daily, and like mentioned above, it’s incredibly common in CSS. Shadows aren’t borders and shouldn’t have to be used as such…

PLEASE :smile:

Perhaps also add the ability to add additional borders.

2 Likes

I totally agree here, and I still can’t believe this was not there from the start. I would simply do it the same way that border-radius is… All at the same time by default, with the option to split in 4 different settings. I will also bring out that stroke space/length requires improvement imo. Very unintuitive right now.

1 Like

@Joshua, you could still hack three inner shadows to simulate a three stroked box.

But I hate that it’s still a hack – and a tedious one at that!

@Figma, I get that vector networks (as you call them) make it more difficult to allow for CSS style borders on objects. But we don’t need CSS borders on those objects (keep what you’ve got on free vector forms because it’s powerful – and more akin to SVG).

But anything that is a rectangular box at its core (namely any Figma frame whether rotated or rounded!), it is completely analogous to any regular HTML DOM element that can take border properties. So please let us use independent, per-side stroke properties specifically on frames (much like we can for corner radii). Vector networks already do something different than frames anyway, so we don’t need it there and you can keep things working exactly the same for those.

5 Likes

@mattaningram This, this, so much this. It’s exactly what i just wrote before reading through the whole thread. But Figma could easily split the functionality between vector objects and frame objects. They’re already massively different anyway. Frames can’t be anything but rectangular in their core construction (rotated or not, rounded corners or not) which is exactly the same as an HTML box-model/flow object. This would make it very easy to allow a per-side stroke style on frames and only frames within figma (mimicking CSS borders and the functionality they already provide with border radii). They can keep the functionality exactly as is on all other objects (which is closer to SVG standards and still 100% harmonious with HTML5 standards).

4 Likes

Yes please! I miss this feature so much, because I also can’t use a negative spatial size in autolayout.

This feature would work exactly the same as border-bottom in CSS and remove the need to add odd lines in this case.

Sorry if posted in the wrong place…

I would downvote this if I could. What I like about current borders is that they are simple and work the same as I used to in Adobe Illustrator and Photoshop.

CSS borders are cool but… what problem is there that cannot be solved using the combination of nested auto layout and paddings?

Also think about Android and iOS. There is nothing even close in their SDK, so having “CSS border support” makes zero sense for mobile developers.

You can do it similar to how you implemented separate Corner Radius controls.

I know there are “alternative” ways to do it, the most popular being the “drop shadow” but

  1. CSS would allow you to do border-top/left/bottom/right and the design tool should mimic behavior like this.
  2. It’s confusing for dev handoff to use shadows instead of more semantic uses.
  3. It’s cleaner to control using stroke controls than some hacky workaround with shadows.
  4. Works great for one side, but what about 2 sides? 3?
  5. Does not honor border radius very well.
    Chris Clark
2 Likes

I feel like this is where Figma is starting to break down as a UI design tool for me and having to rely on other tools to have better dev handoff. Requiring my design team to use Frames/Rects for borders or inner shadows (really!) doesn’t feel very modern, and usually creates a lot of design debt. My next favorite tool is one that maybe isn’t born out of the Photoshop/Illustrator paradigm (I think we are pretty far from them in UI design history).

There are things I love about Figma, but lately I see other tools integrating features that are more specific to UI design, and not an all encompassing tool. cough, cough, design tokens (Figma tokens plugin is great, but if there was a tool with that built in, I would switch)

4 Likes