円に部分的にborderプロパティを付けられる仕組みについて教えて頂きたいです。

前提・実現したいこと

CSSのプロパティに関する質問です。
円にborderプロパティで部分的にボーダーをつけたい時、border-leftやborder-rightとすると、円の90度分のみを指定することができると思うのですが、これはどういった仕組みなのでしょうか。

例えば、ローディングアイコンを作りたくて、以下のように90度分だけ欠けた円を作りたい場合、

  border-radius: 50%;
  border: 2px solid #333;
  border-right: 5px solid transparent;

のようにすると、右側1/4が欠けた円ができると思います。

ここで、何故border-rightプロパティでこのように円の右側だけを部分的に指定できるのでしょうか。

元要素の四つ角をborder-radius:50%;で丸めたときに、円の頂点からから45度から135度は、丸める前の要素でいう右辺なので、border-rightで指定できるからだ、と仮説を持ったのですが、どなたかご教授いただけますでしょうか。

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

回答2件

実際は”「円」じゃないから”です。
border-radiusはあくまで要素の角を丸める指定なのです。
下記だけにしてみると分かると思います。

css
1  border: 2px solid #333;
2  border-right: 5px solid transparent;

要は「全部色を付けた後に１か所だけ色を透明にする」というやり方になります。
この方法の方がtop,bottom,left,rightにそれぞれ指定するよりも短く簡潔に書けます。

書き漏れたので追記：
つまり質問者さんの仮説は「合っている」ということになります。

投稿2020/04/18 08:37

編集2020/04/18 08:40

m.ts10806

総合スコア80875

Woodie

2020/04/18 12:00

回答ありがとうございます！仮説があっていたようでよかったです！直感的に円の右側だからborder-rightが付けられるのではなく、単にborder-radiusは要素の角を丸めているだけなのであって、丸めた後であっても、要素の右辺であることには変わりはないということですね。 borderで一括で指定した後にrightを指定するとこのようにすっきりと書けるのですね！ありがとうございます！

m.ts10806

2020/04/18 20:56

hrを完全1pxにしたいときにも使えます。borderをnoneにしたあとにtopだけ1pxにする。

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

ベストアンサー

デベロッパーツールで、border-radiusの値を0⇒50%まで変えてみましょう。下記例で言うとwidthも値を0まで変えてみましょう。どのような仕組みかがわかると思います。

CSS
1div {
2  border-radius: 15%;
3  border: 20px solid #333;
4  border-color: red green blue yellow;
5  width: 10vw;
6  height: 10vw;
7}
8```**動くサンプル：**[https://jsfiddle.net/pb9ouxqr/](https://jsfiddle.net/pb9ouxqr/)
9
10---
11
12【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
13[https://saruwakakun.com/html-css/basic/chrome-dev-tool](https://saruwakakun.com/html-css/basic/chrome-dev-tool)
14
15【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
16[https://nandemo-nobiru.com/2944/](https://nandemo-nobiru.com/2944/)