Border-radius, CSS3로 하는 라운딩 처리 방법

Border-radius, CSS3로 하는 라운딩 처리 방법

2012/01/12

- Photo by arkonova -

CSS3에서 border-radius를 이용하면,

복잡한 코드나 이미지를 사용하지 않고도 쉽게 라운딩처리를 원하는 형태로 할 수 있습니다.
 

 border-radius 사용법은 아주 간단합니다.

#example1 {
border-radius: 15px;
}

그런데 파이어폭스에서는 -moz- 속성을 추가해 주어야 화면에 제대로 보여지기 때문에 다음과 같이 속성값을 동시에 추가해 주는 것이 좋습니다.

#example2 {
-moz-border-radius: 15px;
border-radius: 15px;
}

어떻게 동작하는가?

border-radius는 추가 속성을 지정해주어 각 모서리마다 독립적으로 라운드처리를 설정해줄 수 있습니다.

border-top-left-radius,  border-top-right-radius 
border-bottom-left-radius,  border-bottom-right-radius

#example3 {
border-top-left-radius: 10px 5px;
border-top-right-radius: 15px;
border-bottom-left-radius: 10% 5%;
border-bottom-right-radius: 10%
}

고도를 기다리며 zenith5.tistory.com by 킥스

<관련글>

[CSS] - DIV와 CSS 레이아웃, 웹표준에 대한 소개
[CSS] - 헤더 태그에 SEO를 고려하여 텍스트 대신 이미지 넣는 방법
[CSS] - CSS ID 선택자
[CSS] - CSS 클래스(Class)
[CSS] - CSS 기초적인 구문 규칙
[CSS] - Inline elements 와 Block level elements
[CSS] - CSS 선언방법

top : 수석, 장화의 상부, 일등, 최고위, 최고위의 사람