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로 숫자를 줄이면



아까에 비해 뿔이 버렸습니다
즉 ...

숫자가 커질수록 모서리는 둥글다는 것을 알았습니다