LoginSignup
2
3

More than 1 year has passed since last update.

iPhoneアイコンの角丸半径 対応表

Last updated at Posted at 2022-03-17

iPhoneのアイコンの角丸をcssで表現しようとすると
border-radius: 27px; とかじゃキッチリ同じにはならないそうです。

.smooth_corner_r27 {
    background: ...;
    border-radius: 27px;
  }
  @supports (mask-image: paint(smooth-corners)) {
    .smooth_corner_r27.is-loaded {
      border-radius: 0;
      mask-image: paint(smooth-corners);
      --smooth-corners: 12;
    }
  }

とかやらないとキレイにならないのです。

Smooth Corners、Smooth Curves、Continuous Corner Curve、Squircle Corner
と諸説呼び方があるようです。
ios7よりも前はもっとトガッてたみたいっすね。
これだけ広く利用されているのでアイコンに採用しようとするのですが
この半径の長さ。これがどこも曖昧でした。
なので 対応表作成しました。

1辺の長さpx R半径px=辺長÷4.5
8 1.777777778
9 2
10 2.222222222
11 2.444444444
12 2.666666667
13 2.888888889
14 3.111111111
15 3.333333333
16 3.555555556
17 3.777777778
18 4
19 4.222222222
20 4.444444444
21 4.666666667
22 4.888888889
23 5.111111111
24 5.333333333
25 5.555555556
26 5.777777778
27 6
28 6.222222222
29 6.444444444
30 6.666666667
31 6.888888889
32 7.111111111
33 7.333333333
34 7.555555556
35 7.777777778
36 8
37 8.222222222
38 8.444444444
39 8.666666667
40 8.888888889
41 9.111111111
42 9.333333333
43 9.555555556
44 9.777777778
45 10
46 10.22222222
47 10.44444444
48 10.66666667
49 10.88888889
50 11.11111111
51 11.33333333
52 11.55555556
53 11.77777778
54 12
55 12.22222222
56 12.44444444
57 12.66666667
58 12.88888889
59 13.11111111
60 13.33333333
61 13.55555556
62 13.77777778
63 14
64 14.22222222
65 14.44444444
66 14.66666667
67 14.88888889
68 15.11111111
69 15.33333333
70 15.55555556
71 15.77777778
72 16
73 16.22222222
74 16.44444444
75 16.66666667
76 16.88888889
77 17.11111111
78 17.33333333
79 17.55555556
80 17.77777778
81 18
82 18.22222222
83 18.44444444
84 18.66666667
85 18.88888889
86 19.11111111
87 19.33333333
88 19.55555556
89 19.77777778
90 20
91 20.22222222
92 20.44444444
93 20.66666667
94 20.88888889
95 21.11111111
96 21.33333333
97 21.55555556
98 21.77777778
99 22
100 22.22222222
101 22.44444444
102 22.66666667
103 22.88888889
104 23.11111111
105 23.33333333
106 23.55555556
107 23.77777778
108 24
109 24.22222222
110 24.44444444
111 24.66666667
112 24.88888889
113 25.11111111
114 25.33333333
115 25.55555556
116 25.77777778
117 26
118 26.22222222
119 26.44444444
120 26.66666667
121 26.88888889
122 27.11111111
123 27.33333333
124 27.55555556
125 27.77777778
126 28
127 28.22222222
128 28.44444444
129 28.66666667
130 28.88888889
131 29.11111111
132 29.33333333
133 29.55555556
134 29.77777778
135 30
136 30.22222222
137 30.44444444
138 30.66666667
139 30.88888889
140 31.11111111
141 31.33333333
142 31.55555556
143 31.77777778
144 32
145 32.22222222
146 32.44444444
147 32.66666667
148 32.88888889
149 33.11111111
150 33.33333333
151 33.55555556
152 33.77777778
153 34
154 34.22222222
155 34.44444444
156 34.66666667
157 34.88888889
158 35.11111111
159 35.33333333
160 35.55555556
161 35.77777778
162 36
163 36.22222222
164 36.44444444
165 36.66666667
166 36.88888889
167 37.11111111
168 37.33333333
169 37.55555556
170 37.77777778
171 38
172 38.22222222
173 38.44444444
174 38.66666667
175 38.88888889
176 39.11111111
177 39.33333333
178 39.55555556
179 39.77777778
180 40
181 40.22222222
182 40.44444444
183 40.66666667
184 40.88888889
185 41.11111111
186 41.33333333
187 41.55555556
188 41.77777778
189 42
190 42.22222222
191 42.44444444
192 42.66666667
193 42.88888889
194 43.11111111
195 43.33333333
196 43.55555556
197 43.77777778
198 44
199 44.22222222
200 44.44444444
201 44.66666667
202 44.88888889
203 45.11111111
204 45.33333333
205 45.55555556
206 45.77777778
207 46
208 46.22222222
209 46.44444444
210 46.66666667
211 46.88888889
212 47.11111111
213 47.33333333
214 47.55555556
215 47.77777778
216 48
217 48.22222222
218 48.44444444
219 48.66666667
220 48.88888889
221 49.11111111
222 49.33333333
223 49.55555556
224 49.77777778
225 50
226 50.22222222
227 50.44444444
228 50.66666667
229 50.88888889
230 51.11111111
231 51.33333333
232 51.55555556
233 51.77777778
234 52
235 52.22222222
236 52.44444444
237 52.66666667
238 52.88888889
239 53.11111111
240 53.33333333
241 53.55555556
242 53.77777778
243 54
244 54.22222222
245 54.44444444
246 54.66666667
247 54.88888889
248 55.11111111
249 55.33333333
250 55.55555556
251 55.77777778
252 56
253 56.22222222
254 56.44444444
255 56.66666667
256 56.88888889
257 57.11111111
258 57.33333333
259 57.55555556
260 57.77777778
261 58
262 58.22222222
263 58.44444444
264 58.66666667
265 58.88888889
266 59.11111111
267 59.33333333
268 59.55555556
269 59.77777778
270 60
271 60.22222222
272 60.44444444
273 60.66666667
274 60.88888889
275 61.11111111
276 61.33333333
277 61.55555556
278 61.77777778
279 62
280 62.22222222
281 62.44444444
282 62.66666667
283 62.88888889
284 63.11111111
285 63.33333333
286 63.55555556
287 63.77777778
288 64
289 64.22222222
290 64.44444444
291 64.66666667
292 64.88888889
293 65.11111111
294 65.33333333
295 65.55555556
296 65.77777778
297 66
298 66.22222222
299 66.44444444
300 66.66666667
301 66.88888889
302 67.11111111
303 67.33333333
304 67.55555556
305 67.77777778
306 68
307 68.22222222
308 68.44444444
309 68.66666667
310 68.88888889
311 69.11111111
312 69.33333333
313 69.55555556
314 69.77777778
315 70
316 70.22222222
317 70.44444444
318 70.66666667
319 70.88888889
320 71.11111111
321 71.33333333
322 71.55555556
323 71.77777778
324 72
325 72.22222222
326 72.44444444
327 72.66666667
328 72.88888889
329 73.11111111
330 73.33333333
331 73.55555556
332 73.77777778
333 74
334 74.22222222
335 74.44444444
336 74.66666667
337 74.88888889
338 75.11111111
339 75.33333333
340 75.55555556
341 75.77777778
342 76
343 76.22222222
344 76.44444444
345 76.66666667
346 76.88888889
347 77.11111111
348 77.33333333
349 77.55555556
350 77.77777778
351 78
352 78.22222222
353 78.44444444
354 78.66666667
355 78.88888889
356 79.11111111
357 79.33333333
358 79.55555556
359 79.77777778
360 80
361 80.22222222
362 80.44444444
363 80.66666667
364 80.88888889
365 81.11111111
366 81.33333333
367 81.55555556
368 81.77777778
369 82
370 82.22222222
371 82.44444444
372 82.66666667
373 82.88888889
374 83.11111111
375 83.33333333
376 83.55555556
377 83.77777778
378 84
379 84.22222222
380 84.44444444
381 84.66666667
382 84.88888889
383 85.11111111
384 85.33333333
385 85.55555556
386 85.77777778
387 86
388 86.22222222
389 86.44444444
390 86.66666667
391 86.88888889
392 87.11111111
393 87.33333333
394 87.55555556
395 87.77777778
396 88
397 88.22222222
398 88.44444444
399 88.66666667
400 88.88888889
401 89.11111111
402 89.33333333
403 89.55555556
404 89.77777778
405 90
406 90.22222222
407 90.44444444
408 90.66666667
409 90.88888889
410 91.11111111
411 91.33333333
412 91.55555556
413 91.77777778
414 92
415 92.22222222
416 92.44444444
417 92.66666667
418 92.88888889
419 93.11111111
420 93.33333333
421 93.55555556
422 93.77777778
423 94
424 94.22222222
425 94.44444444
426 94.66666667
427 94.88888889
428 95.11111111
429 95.33333333
430 95.55555556
431 95.77777778
432 96
433 96.22222222
434 96.44444444
435 96.66666667
436 96.88888889
437 97.11111111
438 97.33333333
439 97.55555556
440 97.77777778
441 98
442 98.22222222
443 98.44444444
444 98.66666667
445 98.88888889
446 99.11111111
447 99.33333333
448 99.55555556
449 99.77777778
450 100
451 100.2222222
452 100.4444444
453 100.6666667
454 100.8888889
455 101.1111111
456 101.3333333
457 101.5555556
458 101.7777778
459 102
460 102.2222222
461 102.4444444
462 102.6666667
463 102.8888889
464 103.1111111
465 103.3333333
466 103.5555556
467 103.7777778
468 104
469 104.2222222
470 104.4444444
471 104.6666667
472 104.8888889
473 105.1111111
474 105.3333333
475 105.5555556
476 105.7777778
477 106
478 106.2222222
479 106.4444444
480 106.6666667
481 106.8888889
482 107.1111111
483 107.3333333
484 107.5555556
485 107.7777778
486 108
487 108.2222222
488 108.4444444
489 108.6666667
490 108.8888889
491 109.1111111
492 109.3333333
493 109.5555556
494 109.7777778
495 110
496 110.2222222
497 110.4444444
498 110.6666667
499 110.8888889
500 111.1111111
501 111.3333333
502 111.5555556
503 111.7777778
504 112
505 112.2222222
506 112.4444444
507 112.6666667
508 112.8888889
509 113.1111111
510 113.3333333
511 113.5555556
512 113.7777778
513 114
514 114.2222222
515 114.4444444
516 114.6666667
517 114.8888889
518 115.1111111
519 115.3333333
520 115.5555556
521 115.7777778
522 116
523 116.2222222
524 116.4444444
525 116.6666667
526 116.8888889
527 117.1111111
528 117.3333333
529 117.5555556
530 117.7777778
531 118
532 118.2222222
533 118.4444444
534 118.6666667
535 118.8888889
536 119.1111111
537 119.3333333
538 119.5555556
539 119.7777778
540 120
541 120.2222222
542 120.4444444
543 120.6666667
544 120.8888889
545 121.1111111
546 121.3333333
547 121.5555556
548 121.7777778
549 122
550 122.2222222
551 122.4444444
552 122.6666667
553 122.8888889
554 123.1111111
555 123.3333333
556 123.5555556
557 123.7777778
558 124
559 124.2222222
560 124.4444444
561 124.6666667
562 124.8888889
563 125.1111111
564 125.3333333
565 125.5555556
566 125.7777778
567 126
568 126.2222222
569 126.4444444
570 126.6666667
571 126.8888889
572 127.1111111
573 127.3333333
574 127.5555556
575 127.7777778
576 128
577 128.2222222
578 128.4444444
579 128.6666667
580 128.8888889
581 129.1111111
582 129.3333333
583 129.5555556
584 129.7777778
585 130
586 130.2222222
587 130.4444444
588 130.6666667
589 130.8888889
590 131.1111111
591 131.3333333
592 131.5555556
593 131.7777778
594 132
595 132.2222222
596 132.4444444
597 132.6666667
598 132.8888889
599 133.1111111
600 133.3333333
601 133.5555556
602 133.7777778
603 134
604 134.2222222
605 134.4444444
606 134.6666667
607 134.8888889
608 135.1111111
609 135.3333333
610 135.5555556
611 135.7777778
612 136
613 136.2222222
614 136.4444444
615 136.6666667
616 136.8888889
617 137.1111111
618 137.3333333
619 137.5555556
620 137.7777778
621 138
622 138.2222222
623 138.4444444
624 138.6666667
625 138.8888889
626 139.1111111
627 139.3333333
628 139.5555556
629 139.7777778
630 140
631 140.2222222
632 140.4444444
633 140.6666667
634 140.8888889
635 141.1111111
636 141.3333333
637 141.5555556
638 141.7777778
639 142
640 142.2222222
641 142.4444444
642 142.6666667
643 142.8888889
644 143.1111111
645 143.3333333
646 143.5555556
647 143.7777778
648 144
649 144.2222222
650 144.4444444
651 144.6666667
652 144.8888889
653 145.1111111
654 145.3333333
655 145.5555556
656 145.7777778
657 146
658 146.2222222
659 146.4444444
660 146.6666667
661 146.8888889
662 147.1111111
663 147.3333333
664 147.5555556
665 147.7777778
666 148
667 148.2222222
668 148.4444444
669 148.6666667
670 148.8888889
671 149.1111111
672 149.3333333
673 149.5555556
674 149.7777778
675 150
676 150.2222222
677 150.4444444
678 150.6666667
679 150.8888889
680 151.1111111
681 151.3333333
682 151.5555556
683 151.7777778
684 152
685 152.2222222
686 152.4444444
687 152.6666667
688 152.8888889
689 153.1111111
690 153.3333333
691 153.5555556
692 153.7777778
693 154
694 154.2222222
695 154.4444444
696 154.6666667
697 154.8888889
698 155.1111111
699 155.3333333
700 155.5555556
701 155.7777778
702 156
703 156.2222222
704 156.4444444
705 156.6666667
706 156.8888889
707 157.1111111
708 157.3333333
709 157.5555556
710 157.7777778
711 158
712 158.2222222
713 158.4444444
714 158.6666667
715 158.8888889
716 159.1111111
717 159.3333333
718 159.5555556
719 159.7777778
720 160
721 160.2222222
722 160.4444444
723 160.6666667
724 160.8888889
725 161.1111111
726 161.3333333
727 161.5555556
728 161.7777778
729 162
730 162.2222222
731 162.4444444
732 162.6666667
733 162.8888889
734 163.1111111
735 163.3333333
736 163.5555556
737 163.7777778
738 164
739 164.2222222
740 164.4444444
741 164.6666667
742 164.8888889
743 165.1111111
744 165.3333333
745 165.5555556
746 165.7777778
747 166
748 166.2222222
749 166.4444444
750 166.6666667
751 166.8888889
752 167.1111111
753 167.3333333
754 167.5555556
755 167.7777778
756 168
757 168.2222222
758 168.4444444
759 168.6666667
760 168.8888889
761 169.1111111
762 169.3333333
763 169.5555556
764 169.7777778
765 170
766 170.2222222
767 170.4444444
768 170.6666667
769 170.8888889
770 171.1111111
771 171.3333333
772 171.5555556
773 171.7777778
774 172
775 172.2222222
776 172.4444444
777 172.6666667
778 172.8888889
779 173.1111111
780 173.3333333
781 173.5555556
782 173.7777778
783 174
784 174.2222222
785 174.4444444
786 174.6666667
787 174.8888889
788 175.1111111
789 175.3333333
790 175.5555556
791 175.7777778
792 176
793 176.2222222
794 176.4444444
795 176.6666667
796 176.8888889
797 177.1111111
798 177.3333333
799 177.5555556
800 177.7777778
801 178
802 178.2222222
803 178.4444444
804 178.6666667
805 178.8888889
806 179.1111111
807 179.3333333
808 179.5555556
809 179.7777778
810 180
811 180.2222222
812 180.4444444
813 180.6666667
814 180.8888889
815 181.1111111
816 181.3333333
817 181.5555556
818 181.7777778
819 182
820 182.2222222
821 182.4444444
822 182.6666667
823 182.8888889
824 183.1111111
825 183.3333333
826 183.5555556
827 183.7777778
828 184
829 184.2222222
830 184.4444444
831 184.6666667
832 184.8888889
833 185.1111111
834 185.3333333
835 185.5555556
836 185.7777778
837 186
838 186.2222222
839 186.4444444
840 186.6666667
841 186.8888889
842 187.1111111
843 187.3333333
844 187.5555556
845 187.7777778
846 188
847 188.2222222
848 188.4444444
849 188.6666667
850 188.8888889
851 189.1111111
852 189.3333333
853 189.5555556
854 189.7777778
855 190
856 190.2222222
857 190.4444444
858 190.6666667
859 190.8888889
860 191.1111111
861 191.3333333
862 191.5555556
863 191.7777778
864 192
865 192.2222222
866 192.4444444
867 192.6666667
868 192.8888889
869 193.1111111
870 193.3333333
871 193.5555556
872 193.7777778
873 194
874 194.2222222
875 194.4444444
876 194.6666667
877 194.8888889
878 195.1111111
879 195.3333333
880 195.5555556
881 195.7777778
882 196
883 196.2222222
884 196.4444444
885 196.6666667
886 196.8888889
887 197.1111111
888 197.3333333
889 197.5555556
890 197.7777778
891 198
892 198.2222222
893 198.4444444
894 198.6666667
895 198.8888889
896 199.1111111
897 199.3333333
898 199.5555556
899 199.7777778
900 200
901 200.2222222
902 200.4444444
903 200.6666667
904 200.8888889
905 201.1111111
906 201.3333333
907 201.5555556
908 201.7777778
909 202
910 202.2222222
911 202.4444444
912 202.6666667
913 202.8888889
914 203.1111111
915 203.3333333
916 203.5555556
917 203.7777778
918 204
919 204.2222222
920 204.4444444
921 204.6666667
922 204.8888889
923 205.1111111
924 205.3333333
925 205.5555556
926 205.7777778
927 206
928 206.2222222
929 206.4444444
930 206.6666667
931 206.8888889
932 207.1111111
933 207.3333333
934 207.5555556
935 207.7777778
936 208
937 208.2222222
938 208.4444444
939 208.6666667
940 208.8888889
941 209.1111111
942 209.3333333
943 209.5555556
944 209.7777778
945 210
946 210.2222222
947 210.4444444
948 210.6666667
949 210.8888889
950 211.1111111
951 211.3333333
952 211.5555556
953 211.7777778
954 212
955 212.2222222
956 212.4444444
957 212.6666667
958 212.8888889
959 213.1111111
960 213.3333333
961 213.5555556
962 213.7777778
963 214
964 214.2222222
965 214.4444444
966 214.6666667
967 214.8888889
968 215.1111111
969 215.3333333
970 215.5555556
971 215.7777778
972 216
973 216.2222222
974 216.4444444
975 216.6666667
976 216.8888889
977 217.1111111
978 217.3333333
979 217.5555556
980 217.7777778
981 218
982 218.2222222
983 218.4444444
984 218.6666667
985 218.8888889
986 219.1111111
987 219.3333333
988 219.5555556
989 219.7777778
990 220
991 220.2222222
992 220.4444444
993 220.6666667
994 220.8888889
995 221.1111111
996 221.3333333
997 221.5555556
998 221.7777778
999 222
1000 222.2222222
1001 222.4444444
1002 222.6666667
1003 222.8888889
1004 223.1111111
1005 223.3333333
1006 223.5555556
1007 223.7777778
1008 224
1009 224.2222222
1010 224.4444444
1011 224.6666667
1012 224.8888889
1013 225.1111111
1014 225.3333333
1015 225.5555556
1016 225.7777778
1017 226
1018 226.2222222
1019 226.4444444
1020 226.6666667
1021 226.8888889
1022 227.1111111
1023 227.3333333
1024 227.5555556
1025 227.7777778
1026 228
2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3