1. Web Design
  2. UX/UI

How to Create One-Sided Borders in Sketch and Adobe XD

Scroll to top
Read Time: 3 min

In this quick tip I want to show you a neat trick for creating one-sided borders in both Sketch and Adobe XD. 

If you’ve used either of these applications before you’ll know that creating borders is actually pretty simple. The problem is that borders are added to an object’s whole outside edge–neither application allows for adding a single border along just one side.

It is, however, possible to achieve what we want by using drop shadows. Let’s take a look.

Watch Screencast

If you want more essential Sketch videos, try my free Sketch tutorial. I'll take you through all the key features and functions of Sketch, step by step.

Or to learn more about Adobe XD, take our free course on Adobe XD auto-animate.

Creating Easy One-Sided Borders

Let’s start with a simple rectangle on our canvas, in this case using Adobe XD. It has a fill color, and a border:

borders in Adobe XDborders in Adobe XDborders in Adobe XD
Adobe XD

If we want the border to appear only along the bottom edge, we can remove the Border (by unchecking the border settings in the properties sidebar) then selecting Shadow instead.

We’ll give the shadow a value along the Y offset (which will push the shadow downwards) make sure the X offset reads 0, and remove the B value (this is the blur). Give the shadow a suitable color (#707070 in our case) and make sure the opacity is set to 100%.

one-sided borders in Adobe XDone-sided borders in Adobe XDone-sided borders in Adobe XD
One-sided borders in Adobe XD

There we have it–a simple technique for creating a one-sided border. Borders like this are a really effective (but subtle) way to add dimension to your UI designs. Try it on dialog boxes or form inputs.

Multiple One-Sided Borders

In Sketch it’s also possible to add multiple shadows, and therefore multiple one-sided borders. Click the + icon next to the shadow settings to add another. In the example below you can see a larger border along the bottom edge, with a thinner border along the top:

Multiple one-sided borders in SketchMultiple one-sided borders in SketchMultiple one-sided borders in Sketch
Multiple one-sided borders in Sketch

One disadvantage to this technique is the way corners are rendered in the event of having two adjacent borders. There’s a glaring gap:

This isn’t like CSS would render the corner, and it’s not really solvable in a perfect way in Sketch unless you use the following plugin:

Single Border Sketch Plugin

For even more control (and to solve the problem mentioned previously) you can use a Sketch plugin called single-border.

Note: third-party plugins aren’t yet available for Adobe XD, though you can expect them to be a big part of how XD develops in the future.

Once installed, select an object and go to Plugins > Single Border > Single Border. In the resultant pop-up you can specify exactly what you want your border to look like:

single border sketch plugin on githubsingle border sketch plugin on githubsingle border sketch plugin on github


That’s it; a simple trick to improve your UI design in Sketch and Adobe XD. If you know of any other similar tricks please let us know in the comments!

Learn More About UI Design

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.