HTML [CSS] 테두리 둥글게 만들기 Rounded Corners
페이지 정보
본문
표준 . Standard
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
개별설정 . Individual Corners
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
개별설정 . Shorthan
-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
-moz-border-radius: 10px 20px 30px 0;
참고자료
https://css-tricks.com/snippets/css/rounded-corners/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
개별설정 . Individual Corners
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
개별설정 . Shorthan
-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
-moz-border-radius: 10px 20px 30px 0;
참고자료
https://css-tricks.com/snippets/css/rounded-corners/
댓글목록
등록된 댓글이 없습니다.