css 테두리 둥글게

css의

border-radius 기능을 이용해

테두리를 둥글게 만들어보겠습니다.

 

---

1. 테스트용 코드

각진 테두리

먼저 테스트용으로

코랄색의 박스를 하나 만들었습니다.

 

디자인은 테스트용이니

원하시는 디자인으로 꾸며주세요.

 

아래에 예제를 첨부해둘 테니

지금은 그냥 봐주세요~

 

 

-

 

---

2. 테두리 둥글게

div{
	border-radius:50px;
}

border-radius

테두리를 둥글게 만드는 css 코드는

border-radius 입니다.

 

값으로는 원하는 만큼의 숫자를 적어주세요.

숫자가 클수록 둥근 모양이 됩니다.

-

 

div{
	border-top-left-radius:50px;
}

border-radius 한쪽만

네 꼭짓점 중 하나만 선택해주면

한쪽만 둥글게 만들기도 가능합니다.

 

border-top-left-radius

 왼쪽 위 부분만 둥글게 만들 수 있습니다.

 

코드	내용
border-top-left-radius	왼쪽 위 둥글게
border-top-right-radius	오른쪽 위 둥글게
border-bottom-left-radius	왼쪽 아래 둥글게
border-bottom-right-radius	오른족 아래 둥글게

정리하자면

이렇게 볼 수 있겠군요.

 

-

border-radius 함축

한쪽만 선택해서 적지 않아도 함 축하는 방법으로 사용할 수도 있습니다.

 

4개의 값을 모두 적어주면 되는데 왼쪽 위부터 시계방향 순서대로 적어줍니다.

 

설명을 위해 각각 값을 적었지만 이렇게 만들면 이상하니 잘 사용하진 않습니다.

 

대각선 방향의 값을 동일하게 적으면 괜찮을 것도 같네요.

---

3. border-radius 원 만들기

div{
	border-radius:50%;
}

border-radius 50%

border-radius를 잘 사용하면

원을 만들 수 있습니다.

 

값을 50%로 주면

테두리가 절반까지 둥근 모양이 되니

원이 됩니다.

 

정원을 만들고 싶다면

가로 세로 값을 동일하게 해 주시면 됩니다.

 

 

-

 

예제

코드펜으로 예제를 준비해봤습니다.

직접 코드를 확인해보시고 실험해보세요~!

 

 

---

이상으로 css로 테두리를 둥글게 만드는 방법을 알아보았습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - css 변수 사용 방법

css 변수 사용 방법

[coding/editor] - css에서 html class 보기

css에서 html class 보기

 

그럼 이만.

총총.