@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).
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
- CSS would allow you to do border-top/left/bottom/right and the design tool should mimic behavior like this.
- It’s confusing for dev handoff to use shadows instead of more semantic uses.
- It’s cleaner to control using stroke controls than some hacky workaround with shadows.
- Works great for one side, but what about 2 sides? 3?
- 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.
- Describe the problem your experiencing and how your idea helps solve this
The ability to add bottom top or border bottom to a frame
- 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.
-
For designing table components we used to draw lines or shapes to show row-dividers or column-dividers, but it I think would be easier for front-end devs and me as a UI-designer too just divide the Stroke attribute into sub-params: Bottom:1 px; Right:1px as you did with CornerRadius sub-params and Paddings in Auto-align with last updates(thank you so much for these updates guys!!! So happy now, really helpful.)
-
So in example I need a border in the middle of my table, so with actual instrumens all I have to do is to add lines in every cell and add more parent auto-aligns which make my structure more complex.
Thats way, separated parameters of Stroke will exclude additional time of creating complex solvations with rectangles or lines with autoalign, and front-end devs will happily see in code Border-right:1px; Border-bottom:1px; instead of simple Border:1px solid #color; -
Who is agree with me? Will it be helpfull for us UI designers? and will it save muuuch more time producing components and its variants? I think yes!
With hope and optimism, Alexander Pivovarov.
I also miss this functionality. It would make it easier to make components with bottom border and variable width.
+1 for this. Creating table components would be way faster with support for individual border values - just like padding.
For example:
OTHER WAYS I’VE TRIED CREATING TABLES:
Frames with layout grid for rows and columns
Groups with -1 horizontal spacing
Frame that clips content and inner border that is 1px wider than frame
So far, it looks like creating a cell that has individual elements for border-top, border-right, border-bottom, border-left and content, and stacking them in nested auto layouts and creating components for each instance of border, then making each a variant is the only way to make tables flexible enough to work.
Is there a better way? I’ve seen plenty of articles and tutorials, but they are all flawed. Trying real hard not to reply on a community plugin because it will break eventually.
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.
Commenty-comment-comment. Adding to the pile of +1s. I’d love this feature as well.
It would be really helpful to be able to control the individual sides of a border, similar to how you can in css
top-right-border: 2px, bottom-left-border: 1px etc. I have found a work around with the drop-shadow effect, but it’s not as flexible.
I strongly disagree 
I know this allows to do a super fancy tricks in CSS, like drawing arrows next to each item in the list… and I actually did so, but…
This is only useful in Figma if you are doing pure web design. Android, iOS, Mac, and Windows have no native support for this feature. You also cannot export it to PDF or SVG files. If developer wants to implement your left and bottom border, he has to draw two separate lines. Now, if you rely on CSS behavior to join these two lines (e.g. make one corner round, other tapered) then this is absolute worst nightmare for developer to implement. So seeing this “border-bottom: 1px” will make any iOS or Android developer very very unhappy: 
Yes, adding a line to table cell seems to be burdensome. Yet it is actually a good habit when you have to support multiple platforms. There is nothing you cannot achieve by using Auto Layout and components, and these very easily translate to UIKit, SwiftUI and Android SDK.
A very interesting topic. I understand that some mobile designers are questioning the need for this feature. However I am surprised that this feature has not already been included. For those designing for web and web on mobile this feature is essencial to designing a finished product.
We should also consider the box model:
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
I always set my projects to border-box but that might not meet everyones needs.