CSS Quick Tip: Using Outline

The outline property in CSS is an interesting and rarely used one. We met with it in almost every project through the browser’s native focus state formatting but nothing more.

Often we override this behavior and clear the outline with 0 or none value; this is often a mistake. By alone this is not a problem if you style the :focus of the links correctly but if not you should leave it on the default settings (in case of accessibility it is matter).

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

Above you can see the Chrome browser default settings for the focus state formatting.

The outline is mostly similar for the border property, which can cause some misunderstanding.

The Differences Between border and outline

Although you can declare similarly to the border property, there are some main differences in behavior.

1. It Won’t Effect The Box Model

The main difference between these two is that the outline not takes place from the layout. If you apply some outline there, won’t be any flickering/shifting in your design like in the case of the border (which added to the box model). It is like when you position something with absolute but still styling like a border; this is why this is useful for the focus state, it won’t break our templates.

2. There Aren’t a Radius Option

You also can’t make rounded borders with the outline . If you have rounded buttons or anything like that you can’t be able to create a fitting style which following the line curve.

3. The Outline Has an Offset

The outline has an offset property which is useful if you want to make more separate styling. Using offset, we can create more sophisticated design solutions when styling.

.btn.is-outline:focus {
    outline: 3px solid #2f3ffa;
    outline-offset: 2px;
}

4. We Can’t Set Just One Side

There aren’t any side related property like outline-top or outline-right . We can only format the whole outline at once.

So is It Usable at All?

Yes, it is, but in the more straightforward cases. You shouldn’t have to turn it off if you don’t create an alternative way for the focus state highlighting which is at least as flashy as the default setting.

We can use the outline-color , outline-width or the outline-style property and make it more unique (and of course all of them in the shorthand).

In a complex case – as in CSS always – you can come up with other solution which can cover almost anything.

Outline Alternatives

I think the outline property’s greatest worth is that it shows us that there are users who need a proper outline on focus state (which is not just color alone). It is a great primary method to achieve this goal, but we can go far from it.

I made a pen where you can find some demos. Here you can see that using box-shadow and ::before pseudo-class, we remodeled the function of outline more flexibly.

See the Pen CSS Outline Demo #1 by Adam Laki ( @adamlaki ) on CodePen .

With box-shadow , we can set offsets too and also set multiple of them. It is not perfect because we can’t use transparent color in the gap between the “outline” and the button, so it is only will be complete before a white background.

&.is-shadow-offset:focus {
    box-shadow: 0 0 0 2px #fff,
                0 0 0 4px #2f3ffa;
}

Using the ::before pseudo, we can perfectly achieve our goal in any way but with more code.

&.is-before {
    position: relative;
}

&.is-before:focus::before {
    content: '';
    height: calc(3rem + 4px);
    width: calc(100% + 4px);
    position: absolute;
    top: -4px;
    left: -4px;
    background: none;
    border-radius: 3rem;
    border: 2px solid #2f3ffa;
}