테두리와 외곽선을 둥글게 만들어주는 border-radius 속성

원하는 부분에 border-radius 속성을 통해 테두리 부분을 둥글게 표현할 수 있는 속성입니다

border-radius 속성 예제

.test { border-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 3px; }

위의 예제를 활용하여 만든 예제는 아래와 같습니다

예제입니다

px단위 뿐만 아니라 %도 사용이 가능하며, 유의해야할 점은 border-radius 속성은 익스플로러(IE) 8 이하에서는 구현이 안되기 때문에 백그라운드 이미지를 통해 적용해야 합니다