border-radius 파헤치기(css로 원기둥 만들기)

border-radius: 5px;

가장 많이 쓰이는 사용법일 것 같은데요. 이 사용법은 축약형으로, 실제로는 다음과 같은 속성으로 나눠져 있습니다.

이 문법은 블락의 네 모서리의 border-radius를 한 번에 지정합니다. 그렇다면 저 5px이 의미하는 것은 무엇일까요? 아래의 예시에서 radius값을 조절해보세요!

 

 

border-radius 값을 늘리면 늘릴 수록 원이 커지는데, 저 원의 반지름이 바로 border-radius에 지정한 값이 됩니다.

border-top-left-radius: 5px 10px;

border-radius를 원이 아니라 타원형으로도 지정할 수 있습니다. 처음 써준 값이 타원의 수평 반지름, 두 번째 써준 값이 수직 반지름이 됩니다. 아래의 예시에서 horizontal과 vertical을 각각 수정해보세요.

 

 

border-radius: 30px / 20px;

border-radius의 다른 문법은 margin 같은 속성의 문법과 비슷하지만, 슬래쉬(/)를 이용한 이 문법은 조금 다릅니다. 제목에 보이는 저 슬래쉬(/)는 모든 모서리에 수평 30px, 수직 20px의 타원형 곡률을 적용하게 됩니다. 저는 이 속성을 이용해서 원기둥 모양을 만들었습니다.

원기둥 만들기

위 그림과 같이 원기둥은 직사각형 모양에 아래 위로 타원이 붙어있는 꼴이라고 생각하시면 됩니다. 직사각형의 위 아래에 타원을 그리려면 어떻게 해야할까요? 우리는 네 모퉁이에 타원을 만들 수 있는 방법을 알고 있습니다(border-radius). 왼쪽과 오른쪽 타원의 수평 반지름이 점점 커져서 하나로 합쳐진다면 위 아래에 하나씩의 타원이 만들어지겠죠? 아래의 코드를 보세요.

<style>
  .container{
    width: 200px;
    height:150px;
    position:relative;
  }
  .cylinder{
    position:absolute;
    left:0;
    top:0;
    width: 200px;
    height:150px;
    border-radius: 50% / 25%;
    background-color: rgba(0, 0, 255, 0.8);
    border: 1px solid black;
  }
  .cylinder:after{
    position: absolute;
    width:200px;
    height:75px;
    left:0;
    top:0;
    background-color:  rgba(0, 0, 255, 0.8);
    border-radius: 100px / 37.5px;
    content: '';
  }
</style>
<div class="container">
  <div class="cylinder"></div>
</div>

.cylinder로 타원형 곡률이 적용된 사각형을 만들고, 가상선택자 :after를 이용해서 타원을 만들어 주었습니다. .cylinder에 수평 반지름을 제가 50%로 주었는데, 이렇게 했을 경우 왼쪽의 타원과 오른쪽의 타원의 지름이 둘 다 width값과 똑같아지면서 하나로 합쳐집니다. 수직 반지름의 경우는 원하는 모양에 따라 수치를 다르게 해 주시면 되겠습니다.

 

css로 원기둥을 만들 일이 생겨서 다른 코드를 보다보니 border-radius의 동작에 의문이 들었고, 이해를 도울 수 있는 예시를 만들게 되었습니다. 이해에 도움이 되셨으면 좋겠습니다.