CSS свойство outline на андроиде работает как надо, а на айфоне — неправильно. Почему?

Question

[stremsky]

Вот два скрина: андройд и айфон.
Курсор находится на кнопке playlist, и на андроиде выглядит как надо, а на айфоне нет скругления углов.
Это не бордер, это аутлайн.
Вот стили:
height: 100%;
outline: 4px solid var(--white);
border-radius: 90px;
Есть идеи почему?

Comments

[Максим]

На outline вообще не бывает скругления, используйте бордер

[Antonio Solo]

вероятно из-за различной поддержки CSS на разных платформах
https://caniuse.com/ вам в помощь

[Ankhena]

Максим, уже бывает.

stremsky используйте border или тени.

[Максим]

Ankhena, не знал...

[stremsky]

Antonio Solo, так и есть. Сафари не поддерживает border-radius в свойстве outline. Спасибо!

Answer 1

[Taulan Khatuaev]

Проблема может быть в том то что iphone использует safari. Которые имеют свой свойство отображение css свойств.
Вы можете использовать CSS свойство -webkit-appearance, чтобы задать стандартный внешний вид элементов формы для Safari на iPhone.

-webkit-appearance: none;
border-radius: 90px;
border: 4px solid var(--white);