border-radius 프로퍼티, border-radius 속성값, border-radius 속성 형식

 

 

border-radius 프로퍼티

·       박스 모서리를 둥글게 만드는 속성

·       이전에는 박스의 모서리를 부드럽게 만들 때에는 그래픽이나 자바스크립트를 이용하였는데, CSS3에서는 border-radius 속성을 이용하여 모서리 부분을 손쉽고 다양하게 표시할 수 있습니다.

·       각 모서리를 똑같은 모양으로 만들 수도 있고, 네 모서리 중 원하는 부분만 둥글게 표현하여 원, 반원, 4분의 1조각 짜리 원 등을 표현해 낼 수도 있습니다.

 

 

border-radius 속성값

·       속성 값을 하나만 입력하면 네 개의 모서리가 똑같은 모양이 됩니다.

·       각각의 모서리 값을 입력하면 모서리 별로 다른 모양을 만들 수 있습니다.

 

속성 값을 적는 순서

적용 순서	적용 위치
1	top-left
2	top-right
3	bottom-left
4	bottom-right

 

 

border-radius 속성 형식

·       border-radius가 50px일 경우 네 모서리가 50px만큼 둥근 박스를 만들어 줍니다.

·       둥근 모서리를 동그란 원의 테두리로 생각했을 때 그 원의 반지름을 radius 값으로 표현합니다.

·       border-radius 속성은 CSS3에서 새로 추가된 속성으로 어떤 브라우저는 지원이 되고 어떤 부라우저에서는 지원이 안될 수 있습니다

 

border-radius: 50px