CSSでのブロックの境界線の角丸め

今、ブロックの角を丸める方法を学びます。 これには、ピクセル単位で値を取る プロパティborder-radiusを 適用します。

例えば、10pxで角丸を指定した 場合、それは何を意味するのでしょうか？これは、 その角丸に内接することができる円の 半径です。もし数学が苦手で最後の文が 理解できない場合は、それを忘れて 単に目で角丸を調整してください。 ある程度の経験があれば、問題なく行えます（角丸を 測定する計測ツールは存在しません、 少なくとも私は聞いたことがありません）。

角丸を10pxに設定して、 ブロックの角を丸めてみましょう：

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}

Результат: