개발하는 일상

border-radius: 5px; 가장 많이 쓰이는 사용법일 것 같은데요. 이 사용법은 축약형으로, 실제로는 다음과 같은 속성으로 나눠져 있습니다. 이 문법은 블락의 네 모서리의 border-radius를 한 번에 지정합니다. 그렇다면 저 5px이 의미하는 것은 무엇일까요? 아래의 예시에서 radius값을 조절해보세요! border-radius 값을 늘리면 늘릴 수록 원이 커지는데, 저 원의 반지름이 바로 border-radius에 지정한 값이 됩니다. border-top-left-radius: 5px 10px; border-radius를 원이 아니라 타원형으로도 지정할 수 있습니다. 처음 써준 값이 타원의 수평 반지름, 두 번째 써준 값이 수직 반지름이 됩니다. 아래의 예시에서 horizontal과 ..