안녕하세요. 오늘은 [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 코드는
브라우저별 식별자를 넣지 않아도 될 것 같습니다.
