Suggest you vote there 🙂

I really need this too. It’s a pain in the neck when designing tables.

You can use a plugin called Border (https://www.figma.com/community/plugin/740014625507871586/Border) which does this by adding a layer group to the edges of the box. It works great except that it’s limited if you need to add corner radius 🤔

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

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)

This feature seems like a lay-up but it’s been ignored for years. This is the reason why Sketch is becoming obsolete. I hope the Figma team doesn’t make the same mistake.

Border, with or without CSS, should function exactly like border radius controls in Figma… select which border (Top, Right, Bottom, Left) is displayed and a thickness number input. Massive oversight for a design tool.

1. Describe the problem your experiencing and how your idea helps solve this

The ability to add bottom top or border bottom to a frame

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)

The ability to add bottom top or border bottom to a frame so we can prototype tables and other elements to better align with CSS capabilities.

Yes, please. This is such a basic everyday requirement and having to use hacks wastes too much time and cause code preview clutter, please add this to frames as it is similar to a div.

I would love to be able to take the stroke away from left and right on certain objects like table panels for instance.

I’ve had it a few times where I have to add separate lines. Gets finicky.

FYI, Axure has had the ability to select which border(s) to display on a given object for at least a decade.

This should be handled like border-radius. Same paradigm and UI.

I mean, at least if we can use the color style for the Effects so I can have our design system all linked up properly, that would still be a win.

Right now because Inner Shadow does not link up with color style and it only accepts a straight color value, I can’t use this hack.

You can already do this (sort of)! Flatten the box and delete the sides you don’t want for the stroke. (Note that it is not a box anymore, it is some vector lines) I hope this helps.

There’s a solution for this

You can turn around this by using Inner Shadow Effect

Blur: 0

X: -1 right / 1 left

Y: –1 bottom / +1 top

It would be great to essentially make border declarations in Figma as you would in CSS.

While an inner shadow effect can be used to achieve this, the color used for the shadow cannot be connected to color styles and need to be updated manually.

I agree on the CSS standards so that this can be handed over to developers

Example - border-top:2px 3px 1px 2px solid red;

Please mimic all CSS border options. Thanks!

I agree with the above comments about the benefit of adding a feature to represent CSS borders. Until that feature becomes available…

I do have a hack that might help some:

Using a text layer, 1px rectangle and, 2 levels of auto layout.

This example uses the 1px rectangle remove the bottom stroke and the text to determine the width.

To achieve this I have offset the margins of the 2 auto layouts.

This can be tweaked to have a border bottom or top (see tab in example for border bottom)

Changing the size of the rectangle and orientation of the auto layouts can control the border left and right. (see toggles in example)

yes, please let us hand off CSS border options. I end up writing out the specs for my developers to swipe for their convenience.

Really unfortunate that you can’t apply borders on individual sides… 😦

However, it’s probably very hard technically, if shapes in Figma under-the-hood are created with svg’s, where there’s only a concept of stroke to the entire shape…

I think Sketch and XD have the same problem.

But I’m sure the developer and designer unicorns at Figma can come up with a solution - quickly… 😉 🦄

Yes, this is a great trick! The down side of this configuration is that the developers won’t see it as a border in inspect modus.

This feature is important for me to. I often use headers with borders on top and bottom

Commenty-comment-comment. Adding to the pile of +1s. I’d love this feature as well.