Use border-radius and outline simultaneously on Safari

Bypass Safari’s issue to use an outline on an element with a border-radius

Photo by Adam van den Brink on Unsplash

Why?

If you read this, you probably already know there is a problem with the outline property on Safari.

If the targeted element already has a border-radius, the outline will not follow it: It will be a square.

The following code will not work on Safari:

button {
  border-radius: 6px;
}

button:focus {
  outline: 2px solid red;
  outline-offset: 1px;
}

The solution

A solution is to recreate the outline from scratch using a pseudo-element (::before or ::after).

It seems heavy but necessary for now (August 2022).

button {
  position: relative;
  border-radius: 6px;
}

button:focus::before {
  content: "";
  position: absolute;
  top: -3px; /* border: 2px + offset: 1px */
  right: -3px; /* border: 2px + offset: 1px */
  bottom: -3px; /* border: 2px + offset: 1px */
  left: -3px; /* border: 2px + offset: 1px */
  border: 2px solid red;
  border-radius: 7px; /* border-radius: 6px + offset: 1px */
}

Problem solved.

Let’s outline 🌈

…with Safari and its mysteries.