| Devices | Radius |
|---|---|
| iPhone X / Xs / Xs Max / 11 Pro / 11 Pro Max / 11 | 39.0 |
| iPhone Xr | 41.5 |
| iPhone 12 mini | 44.0 |
| iPhone 12 / 12 Pro | 47.33 |
| iPhone 12 Pro Max | 53.33 |
| iPad Air / iPad Pro 11-inch / 12.9-inch | 18.0 |
Last active
May 19, 2022 20:51
-
-
Save ruvasik/18e511724ebf592e417c5bcae2486cc9 to your computer and use it in GitHub Desktop.
Mobile devices corners display radius
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */ | |
| /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ | |
| /* Portrait and Landscape */ | |
| @media only screen | |
| and (min-device-width: 320px) | |
| and (max-device-width: 568px) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ | |
| /* Portrait and Landscape */ | |
| @media only screen | |
| and (min-device-width: 375px) | |
| and (max-device-width: 667px) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* ----------- iPhone 6+, 7+ and 8+ ----------- */ | |
| /* Portrait and Landscape */ | |
| @media only screen | |
| and (min-device-width: 414px) | |
| and (max-device-width: 736px) | |
| and (-webkit-min-device-pixel-ratio: 3) { | |
| } | |
| /* ----------- iPhone X ----------- */ | |
| @media only screen | |
| and (min-device-width: 375px) | |
| and (max-device-width: 812px) | |
| and (-webkit-min-device-pixel-ratio: 3) { | |
| .botttom { | |
| border-radius: 36px; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment