【CSS】border-radius

border-radius

角を丸める

角を丸めるとはなんじゃそりゃ？？
という感じですが、図をみてもらうと一目瞭然です

図のように角が丸くなります

例.html

    <div class="square">
      <p>四角でーす</p>
    </div>
    <div class="corners">
      <p>角丸でーす</p>
    </div>

例.css

.square {
  width: 150px;
  height: 100px;
  background-color: orange;
  text-align: center;
}

.corners {
  width: 150px;
  height: 100px;
  background-color: orange;
  text-align: center;
  border-radius: 30px;

上記では border-radius: 30px; で指定しましたが
数字を 50px に指定すると・・・

30px に比べてさらに角が丸くなりました
・・・ということは今度は 10px にして数字を小さくすると

さっきに比べて角張っちゃいました
つまりは・・・

数字が大きくなればなるほど角は丸くなるということがわかりました