Increase spaces in dashed border

I had a challenge with a piece of work on a project recently where the designs showed an “odd” border. It was not quite your usual dashed border and on top of that it went from a horizontal dashed border to a vertical dashed border on mobile. They also added in some large circular pointers for each step required. This is what I had to build:

It was a good challenge and thought it was something worth sharing with you all.

First thing to mention is I already had a grid set up but I will not share that whole code with you (I think it is pretty obvious how it works) so setting the html up first off was pretty straight forward.

After this it was time to think about the styling of these borders. Obviously the standard border CSS was not going to be able to do this. A CSS border-image could work but what about when they want to change the colour or adjust it’s spacing further? it would be very difficult for the client to have to product another image each time and ensure these styles still worked. After a bit of head scratching and a few failed attempts with pseudo-elements and other things I suddenly thought of CSS gradients! you can create a dashed effect with these using the correct settings for your color stop and this is easly changed from a horizontal gradient to a vertical gradient for the responsive side of it.

So I set the gradient and some other parts to the .step like so (including the positioning of the larger bullet point):

.step {
    background-image: linear-gradient(to bottom, #ffb815 26%, #fff 0%);
    background-position: 5px 0;
    background-size: 2px 12px;
    background-repeat: repeat-y;
    padding: 0 30px 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.step::before {
    display: block;
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 100%;
    border: 1.5px solid #ffb815;
}
@media screen and (min-width: 768px) {
    .steo {
        background-image: -webkit-gradient(linear, left top, right top, color-stop(26%, #ffb815), color-stop(0%, #fff));
        background-image: linear-gradient(to right, #ffb815 26%, #fff 0%);
        background-position: top;
        background-size: 12px 2px;
        background-repeat: repeat-x;
        padding-left: 0;
        padding-top: 30px;
    }
}

Hey Presto! A custom gradient border without the need for images and you can can adjust the colour the spacing the size of the dash etc etc with absolute ease.

Here is a working example and perhaps an easier way to grab the code ;)

See the Pen Custom dashed css border by steven hoskins (@hoskinshozzy) on CodePen.