Dream: [CSS] border-radius속성 + 밴더 프리픽스

border-radius 속성은 css3 새로 추가된 속성인데요

border-radius 속성을 사용하게 되면 사각형 모서리를 둥근형태의 사각형으로 변환시킬수가 있습니다.

border-radius 속성이 있기 전에는 이미지로 둥근형태의 사각형을 불러와서 사용했지만 이제는 border-radius 속성으로 둥근형태의 사각형을 만들수가 있게 된거죠

그렇다면 border-radius속성은 어떻게 적용하는걸까요?

border-radius같은 속성은 아래와 같은 방식으로 사용됩니다

<style>

.box{

border:2px solid #000;

/* border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 */

border-radius:50px 40px 20px 10px;

}

</style>

*border-radius사용시 주의사항

border-radius 속성은 css3에서 새로 출시된 속성입니다 그렇기 때문에 border-radius

어떤 브라우저는 지원이 되고 어떤 부라으저 지원이 안된다는 점 꼭 명심하셔야 합니다

또한 border-radius속성을 사용할때는 모든 브라우저별로 지원이 되개 해주는 "밴더 프리픽스"를 사용하는게 좋습니다

ex>

-mst- border-radius:50px 40px 20px 10px; -> 익스

-webkit- border-radius:50px 40px 20px 10px; -> 크롬,사파리

-moz- border-radius:50px 40px 20px 10px; -> 파이어폭스

-o- border-radius:50px 40px 20px 10px; -> 오페라

Dream