border 角 消す

Question

前提・実現したいこと

(画像参照)
角が消えているように見えるのですが、どうやったら実装できるかが分かりません。。。
こちらは、border-radiusで指定しているのでしょうか？それとも、角のみ消せるCSSプロパティ等があるのでしょうか？
ご教示お願いたします。

該当のソースコード

試したこと
border-radiusを指定して、角を丸めるようにしましたが、点線が回るだけで、角を消しているようにはできませんでした。
実装したら、画像の様になります。

    <div class="border"></div>

.border {
  max-width: 500px;
  padding: 50px;
  margin: auto;
  border-radius: 10px;
  border: 5px dotted #cd75b5; 
}

Comments

[m.ts10806]

画像1ってどれでしょう。

あと、これは消えてるわけではなく、点点の周期でそのように見えてるだけではないでしょうか。
HTMLもご提示ください。

[退会済みユーザー]

実装したcssプロパティを1つ1つ調べましたか？

[hatena19]

確認したブラウザはなんでしょうか。
Chromeだと、ドットの丸が欠ける場合がありますね。
border-radiusを削除すると丸が欠けることはないですね。
この現象のことなら、Chromeのバグぽいですね。
FireFoxだと、border-radiusを設定しても欠けることはないですので。

[muneyosi]

htmlの追加と質問文がおかしかったので、編集いたしました。
分かりづらい質問文で、申し訳ございません。

なにか分からないことがあれば、すぐに追加いしますので、ご回答いただけますと幸いです。

[muneyosi]

hetena19さん
バグだったんですね。
大変参考になりました。ありがとうございました!!

[hatena19]

FireFoxが希望にあう実装だとして、
バグというより、ブラウザの実装の差異というものかな。
どちらにしても、borderを使う限りは一ユーザーがどうしようもないことなので、諦めるか、別の方法を考えるしかないように思います。

Answer 1

何を聞いているのか少しわかりにくいですが、たぶん、角丸にするプロパティが何なのかを聞いているんだと思います。(違っていたら、すみません)

角丸にするには、border-radiusを使います。
詳しい使い方はこちらに書かれていますが、簡単に言えば、pxを指定すると、その分だけ角が丸くなります。

Comments

[m.ts10806]

border-radiusは提示されたコードに入ってるようですよ。

[YND_teratail]

自分は、提示されたコードの中で、どのプロパティが角丸にしているのかを聞いている質問だと思いましたが、ちょっと違うんでしょうか。

この回答をする前に、質問した方に何を知りたいのかをもう少し詳しく聞いておくべきでした。すみません。

[m.ts10806]

いえ、書いてないことは他人にはわからないので、仕方がないことだと思います。
（省略しても熟練者ならすべて察してくれるという謎の夢を見ている質問者多すぎです）

[退会済みユーザー]

どのプロパティが角丸にしているのかであれば、
プロパティを1つずつ調べればわかることなので
その意図ではないのかもしれません。
hatena19さんの修正依頼が本来の質問意図っぽいなと思いました。