Junior developer here. I am currently having issues with rounded corners in Safari. I have seen that other people have been having this issue as well. Rounded corners is working in Firefox & Chrome but not Safari. It is currently affecting more than one section of the page. The current code for one of them is:

#portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
  border-radius: 1rem;
  padding: 2px 15px;
  outline-style: solid;
  outline-color: #F10086;
}

I have tried using "px" as well as "em" to no avail. I have tried using -webkit-appearance: none;, overflow:hidden, and I can't seem to find anything on google to help fix this problem. I will attach photos for reference. The first photo is how it appears in Google Chrome & Firefox (the correct way).

Rounded Corners

Here is how the corners appear in Safari. It also appears this way on mobile devices regardless of browser.

No Rounded Corners

Any help would be great. I hope I have described this well enough.

Thanks

CodePudding user response：

This is currently a bug in Safari, which will hopefully be fixed soon, where border-radius does not affect outline. There is a workaround posted here, but it is quite hacky and should only be used if you really need to use an outline instead of a border.