본문으로 바로가기

안녕하세요. 오늘은 [CSS3] border-radius 코드에 대해서 알아보겠습니다.

두리 모서리 를 둥글게 표현해 주는 코드입니다.


지원하는 브라우저는 다음과 같습니다.


크롬 / 파이어폭스 / 익스플로러9↑ /오페라 / 사파리 입니다.


  border-top-left-radius: 20%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px;

위 방식 처럼 각 테두리 모서리마다 개개별로 적용을 시킬 수 있습니다.

좀 더 세부적인 모서리 표현이 가능합니다.


또한, 속기구문으로 한번에 효율적으로 처리 할 수도 있습니다.


  border-radius: 5px 20px 30px 50px;
  border-top-right-radius: 10px 30px;
  border-bottom-right-radius: 5px;





제블로그에 적용된 화면 입니다.


  border-radius: 7px 7px 0 0;

적용된 화면입니다. 윗 메뉴바 부분에 테두리가 생겼습니다.



마지막으로 border-radius 코드를 사용하기 위해선

각 브라우저별로 코드 식별자를 넣어줘야 했습니다.


 -moz-border-radius : 파이어폭스(Firefox 13.0 버전부터 식별자 삭제)

border-radius : 파이어폭스,사파리, 크롬, 익스플로러11 ( 최신버전일때 )

-webkit-border-radius : 사파리, 크롬

-ms-border-radius : 익스플로러

-khtml-border-radius : 콘쿼러 웹 브라우저

-o-border-radius : 오페라


그런데 제가 확인해 본 결과 파이어폭스의 경우는 식별자를 넣은 경우

표현이 되지 않았습니다.


크롬, 사파리, 익스플로러 최신브라우저 또한 식별자 없이

border-radius: 사용해도 표현이 되었습니다.




옛날에는 브라우저별로 식별자를 넣어줬는데 이제 굳이 border-radius 코드는

브라우저별 식별자를 넣지 않아도 될 것 같습니다.


댓글을 달아 주세요