CSS 테두리 둥글게 만드는 방법 | border-radius 사용하기

웹페이지를 만들 때 테두리가 둥근 것들이 있다.

대표적으로 유튜브로 메인 화면을 보면 모든 영상의 가장자리 테두리가 둥글게 되어 있다.

보는 사람의 피로감을 줄이는 요소이기도 하며, 응용하면 세련된 화면을 만들 수 있다.

border-radius는 CSS에서 html 요소의 테두리를 둥글게 만들기 위해 border-radius 속성을 사용할 수 있다.

지정방식( px 또는 % )에 따라 원형, 타원형 또는 한쪽만 둥근 형태까지 모두 구현이 가능하다.

기본 문법은 다음과 같다.

div { border-radius: 10px; }

border-radius 기본 사용법

CSS에서 border-radius는 요소의 모서리를 둥글게 만드는 속성이다.

기본적인 형태는 하나의 값만 지정하여 사용하는 방식으로, 지정된 요소의 모든 테두리를 둥글게 설정할 수 있다.

.box {
  border-radius: 10px;
}

위 코드를 보자. 단순하다.

지정된 요소의 모든 모서리를 모두 10px 만큼 둥글게 만든다.

값이 하나일 경우, 네 방향(좌측 상단, 우측 상단, 우측 하단, 좌측 하단)에 동일하게 적용된다.

border-radius에는 주로 px와 % 단위를 사용한다는 점에 주목하자.