Customizing An Element's Outline Style

May 2, 2019

The default outline style is very limited. For example, you can't give an outline a border radius. Using box shadow and border is a way to make a styled outline.

First thing you need to do is remove the css outline property with `outline: none;`

Using Border

I started by using the border css property to create a custom outline. This was the obvious choice since the outline in the design looked exactly like a border. Here's the image of an input field in focus and its default state.

Input field in focus with blue outline
Input field in focus with blue outline (above) and in default state without outline (below)

Using border worked for me because the input fields are a set height. Let me explain... the outline border is 2px wide and the default border is 1px wide. Borders add space to an element, so the input field with the outline will end up being 1px larger than the default input. Usually this difference in size would cause the input to look like it was glitchy when it went in and out of focus, but since I set a fixed height the input didn't move.

If you're in a situation where you cannot use border because of this size difference issue, try using box shadow instead.

Using Box Shadow

Input outline using box shadow
Input outline using box shadow

Here's an example of what using box shadow can look like. Here I'm using the value `box-shadow: 0 0 0 2pt #2f80ed;` to create a solid line. You can see that it doesn't look like a border, but it also doesn't take up any additional space. You can also style it to make it look like it's glowing.

Box shadow with some spread

Then add a `transition: box-shadow 0.3s` to make it look like the outline is growing on focus.