Safari outline CSS bug ! Let's find out a Glitch

Hello everyone,

Hope you enjoy using Glitch,

I have a problem with CSS,

My perfect rendering is on Chrome. But only on SAFARI I get this problem.

My :hover outline does not take into account the curvature (border-radius) of my div or the element (because I have the same problem on buttons etc…)

Does anyone know a glitch :wink: CSS code to add to force SAFARI to understand and add the border-radius of my outline?

It’s strange because SAFARI understand the border-radius of the classic border.

I’ve asked ChatGBP on it, who say to add : -webkit-border-radius: 8px; = I’ve tried but there is no change.

SAFARI rendering :x: :

Here is my app : (You can check on Chrome outline is showed with the perfect border-radius, due to stupid rules of the support I cannot add a second image to show it).

Here is some code :
.mydivstyles {
background-color: #ffffff;
border-top: solid 1px #ededed;
border-right: solid 1px #ededed;
border-left: solid 1px #ededed;
border-bottom: solid 1px #ededed;
border-radius: 6px !important;
margin-bottom: 22px !important;
margin-top: 15px !important;
padding-right: 13px;
padding-left: 6px;
padding-bottom: 5px;
min-height: 200px !important;
justify-content: center;

.mydivstyles:hover {
outline: 4px solid;
outline-color: rgb(236 236 236);
outline-style: solid;
outline-width: 4px;
border-radius: 6px !important;

I think you just wait for a while until safari ships a new version

you could try to work out an alternative using borders and negative margins instead of outline in the meantime maybe


screenshot of webkit bugtracker comment from nv.cloza on 2022-07-12 saying "I've been waiting for 14 years.. will continue to do so.. 🙂"

the patience is admirable!!


Now in Safari 16.4, outline always follows the curve of border-radius.


This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.