Published on <a href="http://ift.tt/2prJGJE">| Prototyping: From UX to Front End &mdash; Medium</a> UXchange 
I started using Sketch two years ago when one of my professors introduced the new software to our class. Since then, I spent more than eight hours a day working with Sketch, and I can only describe myself as a power user.
Sketch improves version after version, making designing easier and faster. But there is one feature that I started looking for right from the beginning and that I am still looking for: the one side border.
<img alt="" src="http://ift.tt/2o3dnzr">Me adding a border to one side of a rectangle
<h3>Is it just me?</h3>
While trying to understand how to set a border on one side of a shape, I felt stupid and when I feel stupid I search on Google.
So I found two things: that it’s not possible to add a border to a single side, and that I was not alone.
Back in 2013 <a href="http://ift.tt/2firTAU">Diógenes Brito</a> tweeted this question to Sketch:
<blockquote>
<a href="http://twitter.com/sketchapp" title="Twitter profile for @sketchapp">@sketchapp</a> Any way to add just a border-top/edit one side&#8217;s border, like in css?
 — <a href="https://twitter.com/uxdiogenes/status/324995327390269442">@uxdiogenes</a>
</blockquote>
It didn’t take them long to answer:
<blockquote>
<a href="http://twitter.com/uxdiogenes" title="Twitter profile for @uxdiogenes">@uxdiogenes</a> There&#8217;s no way no
 — <a href="https://twitter.com/sketchapp/status/325196386134011904">@sketchapp</a>
</blockquote>
After two long years of silence on this question, <a href="http://ift.tt/2o3lDiR">Daniel Schwartz</a> asked to Sketch the same question:
<blockquote>
<a href="http://twitter.com/sketchapp" title="Twitter profile for @sketchapp">@sketchapp</a> is declaring just a top/bottom/left right border supported yet?
 — <a href="https://twitter.com/danielone/status/588813573591326720">@danielone</a>
</blockquote>
… and nope, nothing changed in two years:
<blockquote>
<a href="http://twitter.com/danielone" title="Twitter profile for @danielone">@danielone</a> not yet, no
 — <a href="https://twitter.com/sketchapp/status/588987223548264448">@sketchapp</a>
</blockquote>
When Ruben Nine asked this:
<blockquote>
<a href="http://twitter.com/sketchapp" title="Twitter profile for @sketchapp">@sketchapp</a> <a href="http://twitter.com/uxdiogenes" title="Twitter profile for @uxdiogenes">@uxdiogenes</a> would love to see that functionality added too. CSS style.
 — <a href="https://twitter.com/sonicbee9/status/572883149450960897">@sonicbee9</a>
</blockquote>
Sketch seemed to leave the door open to adding this feature in the near future:
<blockquote>
<a href="http://twitter.com/sonicbee9" title="Twitter profile for @sonicbee9">@sonicbee9</a> <a href="http://twitter.com/uxdiogenes" title="Twitter profile for @uxdiogenes">@uxdiogenes</a> Who know what the future will bring
 — <a href="https://twitter.com/sketchapp/status/573059000394252288">@sketchapp</a>
</blockquote>
And Sketch, you know what, it was time in 2016, and it’s definitely time now that it’s 2017!
<blockquote>
<a href="http://twitter.com/sketchapp" title="Twitter profile for @sketchapp">@sketchapp</a> <a href="http://twitter.com/uxdiogenes" title="Twitter profile for @uxdiogenes">@uxdiogenes</a> Hey Sketch.. its time..
 — <a href="https://twitter.com/brii_mcfly/status/774286981257793537">@brii_mcfly</a>
</blockquote>
<h3>Shadows and their dark side</h3>
There actually is a way to work around the problem: inner shadows.
To explain how it works I made a video:
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F7VSHCMqrFw4%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D7VSHCMqrFw4&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F7VSHCMqrFw4%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2p3Wg5b">http://ift.tt/2p3Wg5b</a></iframe>
I found that many designers are using this trick, the fastest way to avoid the missing one side border feature. But there are some problems with this approach that are hard to ignore:
<ol>
<li>The exported CSS from Sketch or Zeplin is faulty code that you will need to manually change to reflect the presence of this border:</li>
</ol>
<img alt="" src="http://ift.tt/2o32A8x">CSS on Zeplin
2. When you create two borders with a common corner, one of them will show as being on top of the other:
<img alt="" src="http://ift.tt/2p48rit">Corners with inner shadows on Sketch
While with CSS you get this kind of corner:
<img alt="" src="http://ift.tt/2o3azlO">Corners with borders with CSS
When I need to add a single side border, I use this trick because it gets the job done and it gets it done quick. But it would be amazing to have a specific feature to handle every different border of a shape.
<h3>How I split borders on Sketch</h3>
<img alt="" src="http://ift.tt/2p3OqZk">
My mission as a designer is to make life easier for people and that’s why I designed a new borders panel for Sketch allowing users to manage borders in whichever way they prefer the most.
<img alt="" src="http://ift.tt/2o3gA22">“normal” borders panel
In my experience, it is difficult to handle normal and split borders at the same time, so with this solution you can switch from a state to the other using the toggle in the top-right corner.
By default the toggle is set to “normal”, which is the way things are handled on Sketch nowadays.
<img alt="" src="http://ift.tt/2p409qQ">“split” borders panel
Switching state from “normal” to “split” takes you to a brand new panel with four layers, one for each side of the shape (top, right, bottom and left).
Here, every side is independent from the others.
<img alt="" src="http://ift.tt/2o36Wwn">
Corners are now handled like through CSS, and when exporting the code, it will reflect this design.
With this new borders feature, you can create outstanding fake 3D shapes that work great.
<img alt="" src="http://ift.tt/2p3UMYA">
<h3>TL;DR</h3>
<ul>
<li>Sketch doesn’t allow you to apply a border to only one side of a shape;</li>
<li>The people have spoken and they want this feature;</li>
<li>Designers currently work around this problem using the inner shadows feature;</li>
<li>Inner shadows works well on Sketch but creates problems when exporting the CSS file from Sketch, and is not an elegant solution for corners;</li>
<li>I designed a new Sketch feature that allow you to apply a single border to a shape;</li>
<li>Sketch, whaddaya think?</li>
</ul>
What do you think of this project? Which other feature you would like to see on Sketch?
You can also find this project on <a href="http://ift.tt/2o31w4q">Dribbble</a> !
If you liked this article feel free to comment and share!
Daje! Davide Pisauri
<img src="http://ift.tt/2p45uOK" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2o3bGSL">I designed the single-border feature for Sketch</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

I designed the single-border feature for Sketch

Top Stories