We use a lot the trick with the shadow to add borders, but that only works when it’s top or bottom. What if I need to add one border vertically to only the right side for example? It would be nice to have this 🤗 Thanks!
Personally I don’t like using that trick (causes me too many other problems), but if you do you want to create left or right borders you can do so with the X value in the drop shadow; see the screenshot below for a right hand only border.
An X value of -1 will place the border on the left side.
it doesn’t work with Auto layout (((
apply the shadow to the frame, and you must select a background/fill color, otherwise, it’s the items that get the shadow.
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.
Yes, it does work in an autolayout?
Figma – 19 Nov 21
If you’re thinking the internal spacing/alignment, then you can either use a dropshadow to put the border on the outside, or you can alter the autosuggest padding settings to compensate (ie. a bit of a hack on the hack)
EDIT: @Sandi_Chen See the above file, you can force it by using a 1% opacity on the fill you can still get the effect. Personally I feel all of this is just too hacky, but YMMV 🙂
The problem with the shadow hack is that it sends the wrong info to devs who inspect Figma see how to code the design (one of Figma’s selling points.)
I can think of tons of designs that would be essentially impossible to achieve with just auto-layout. Look at any magazine where things aren’t just in neat stacks and rows.
Also why default to catering to native devs? The same issue comes up when designing for web and web developers have to figure out how to translate Figma’s limitations into clean CSS. A line between items in a list won’t conform to the item’s border-radius for example.
@anon21722796, how does this not exist yet?
A big part of CSS based UI design is border specification on container elements.
Since frames act like containers, it is natural to want to specify the frame attributes in similar ways as CSS.
Today, I cannot create divider lines based on frame positions, because I can’t access just one of the 4 borders as I can in CSS.
Proposed solution:
In the frames property panel for strokes, add a modal toggle to allow independent border width settings for each of the 4 borders (top, right, bottom, left) - you could use the same UI as you have for setting margins in the auto layout property editor.
If you allow to round corners separately, why not do the same for borders? Sounds like common sense feature to me.
It should just be where you currently enter the width of the stroke.
Single value gives same border width throughout.
Entering 4 values (0 0 1 0) will generate a 1px bottom border.
Could really use this right now… Not digging the hacky workarounds.
And it doesn’t work if you have corner radii.
Found this, should help us for now. Although you can’t change the weight or colour.
Border – Figma
@anon21722796 still waiting for this basic feature 🙂
Waiting for this feature for almost 2 years at this point. Please consider bring the CSS border model into Figma.
When I set stroke to element, to a rectangle for exemple, the entire element get border. But I can’t set border to sides separately as when I set radius to element.
To make this, we do it with separated lines and adjust the position where we want.
The feature is the simplest way to set border separately to element. I choose the side(left, right, top, bottom or all) and after that I define color, dash and density.
It will improve the handoff to DEV Team cause will be code friendly
This would make life so much easier! Figma is normally way easier than CSS, not harder - this is one of the exceptions.
My current workaround, next to the drop shadow method, is to take whatever frame I want to have a border around, and put it into an autolayout frame with a 1px rectangle on the side where I need a border. It sort of works.
Been waiting for this feature for years. Many other tools already have this functionality, would love to see this in Figma coz it’s a real pain now, especially when working with data tables, which some of us do a lot.
I often want to add strokes to certain sides of a box, for example on the top and bottom. To do this I either have to add a line or add two hard shadows. Being able to select to which sides I want to add the stroke would solve this problem.
Example from Webflow: 
Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?
Hi Joel, this has already been requested here.
The current workaround is to add borders as strokes inside Autolayout containers (but it won’t work for 4 sides, 2 at best)
