前提・実現したいこと

1辺だけ色のついた太いボーダーのある角丸のボックスをcssで作りました。

iOSで見たときだけ、ボーダーのない角の丸みに沿って気づくか気づかないくらいかの同色の細い線が出てしまいます。
これを消すことはできるでしょうか？

該当のソースコード

html
1<body>
2	<div>テキスト</div>
3</body>

css
1
2body{
3	background: #f9f9f9;
4	padding: 50px;
5}
6div{
7	border-radius: 10px;
8	border-right: 20px solid green;
9	background: white;
10	padding: 20px;
11}

試したこと

その他の辺にborder-color:#fffやborder:0;を指定しても変わりませんでした。
ボーダー部分を疑似要素にしてしまえば解決するのですが、
この角丸とボーダーの出方がiOSの仕様なのかが気になりました。

ブラウザ

Windows、Androidでは角に線が出ずに理想の表示になっています。
iPhone、iPad、MacのSafari、Chromeにてこの現象が見られます。

追記

角丸の細い線を消して、理想の表示（windows・Androidで上記コードを見たときの表示）のデザインを崩さないようにしたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

仕様かどうかは存じませんがborder: 1px solid transparent;を指定しておくと消えるように思います

コメントを受けて追記

diff
1body{
2    background: #f9f9f9;
3    padding: 50px;
4}
5div{
6    border-radius: 10px;
7+   border: 1px solid transparent;
8    border-right: 20px solid green;
9-   background: white;
10+   background-color: white;
11+   background-clip: padding-box;
12    padding: 20px;
13}

コメントを受けて追記

要件がよくわかりませんが擬似要素の例をご自身でご提示されていますのでborderである必要はないと読み取りました。背景に指定してしまってはどうですか。

css
1div{
2    border-radius: 10px;
3    background: linear-gradient(270deg, green 0%, green 20px, white 20px, white 100%);
4    padding: 20px;
5}

投稿2021/04/02 07:58

編集2021/04/05 01:05

thyda.eiqau

総合スコア2982

退会済みユーザー

2021/04/02 09:59

回答ありがとうございます。 border: 1px solid transparent; border-right: 20px solid green; にすると、件の線は消えますが、どのブラウザでも太いボーダーの上下がそれぞれに1px分斜めにすぼまってしまうのでNGです…

退会済みユーザー

2021/04/04 12:39

再びありがとうございます。 background-clip: padding-box;をつけて白い部分はよくなっても、上下ボーダーの1px分の太さが存在しているので緑色の部分の上辺と下辺が水平ではないことに変わりないようです…

thyda.eiqau

2021/04/04 22:35

角に出る謎の緑の線を消したいというのが命題だったはずでは？仕様として前提条件があるのなら質問本文に書かれることをおすすめします

退会済みユーザー

2021/04/05 02:45

確かに、前提条件が足りませんでしたね。すみませんでした。結局謎の線を消そうとするとデザインが崩れるので、borderを使わない方法をとるしかなさそうですね…。ありがとうございました。

行動規範の内容に同意します

回答がつかないので…これはそういう仕様ということでいいのかな…。

ひとまずボーダーを使わない方法として、以下で見た目上には各ブラウザで同じ表示になります。

css
1div{
2	border-radius: 10px;
3	background: white;
4	padding: 20px 40px 20px 20px;
5	position: relative;
6}
7div::before{
8	position:absolute;
9	display:block;
10	content: '';
11	height: 100%;
12	width: 20px;
13	top: 0;
14	right:0;
15	background-color: green;
16	border-top-right-radius: 10px;
17	border-bottom-right-radius: 10px;
18}