- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
이 4가지 속성을 먼저 이해하는 것이 편하다. border-radius는 이 4가지 속성의 축약 속성이기 때문이다. 위 4가지 속성은 순서대로 좌측상단, 우측상단, 우측하단, 좌측하단 모서리의 둥근 정도를 지정한다.
이 4가지 속성들은 하나, 또는 두개의 radius값을 설정함으로써 원형, 또는 타원형 모서리를 구현할 수 있다.
! 아래의 예에는 실제 CSS 스타일이 적용되었다.(RSS 피드에서는 아래의 스타일 설정이 나타나지 않을 수도 있음.)
예1 : radius 값을 하나만 설정한 원형(대칭) 모서리
width: 100px;
height: 100px;
border:1px solid black;
border-top-left-radius: 50px;
예2 : radius 값을 2개 설정한 타원형(비대칭) 모서리
width: 100px;
height: 100px;
border:1px solid black;
border-top-left-radius: 100px 50px;
radius 값을 설정할 때 첫번째 값은 가로(수평) 값이고, 두번째 값은 세로(수직) 값이다. 그리고 이 값은 px 외에 em이나 % 등으로도 설정이 가능하다.
 |
| 그림1 |
예3 : radius 값을 %로 설정한 경우
width: 100px;
height: 100px;
border:1px solid black;
border-top-left-radius: 50% 100%;
border-radius는 위의 4가지 속성들을 축약한 속성이다. 즉, border-radius 하나로 위 4가지 속성들을 모두 표현할 수 있다.
예를 들어,
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
border-radius:2px;
border-radius: 2em 1em 4em / 0.5em 3em;
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
border-radius는 다음과 같은 형식으로 radius 값을 지정한다.
border-radius: [모서리 4개의 수평 radius 값] / [모서리 4개의 수직 radius 값] ;
border-radius: [좌측상단 모서리의 수평 radius 값] [우측상단 모서리의 수평 radius 값] [우측하단 모서리의 수평 radius 값] [좌측하단 모서리의 수평 radius 값] / [좌측상단 모서리의 수직 radius 값] [우측상단 모서리의 수직 radius 값] [우측하단 모서리의 수직 radius 값] [좌측하단 모서리의 수직 radius 값] ;
좀 더 이해하기 쉽게 그림으로 표현하면 <그림2>와 같다.
 |
| 그림2 |
좌우측 각 4개의 숫자값들은 생략이 가능한데,
숫자값이 하나만 주어지면, 이는 모서리 4곳의 radius 값이 모두 동일함을 의미한다.
예4 :
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 10px;
예5 : 수평 radius 값은 20px로 통일하고, 수직 radius 값은 각각 10px, 20px, 30px, 40px 로 따로 설정하였다.
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 20px / 10px 20px 30px 40px;
숫자값이 2개가 주어지면 첫번째 숫자값은 좌측상단과 우측하단 모서리의 radius 값을, 두번째 숫자값은 우측상단과 좌측하단 모서리의 radius 값을 의미한다.
예6 :
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 20px 40px;
예7 : 좌측상단과 우측하단의 수평 radius 값은 20px로 주고 우측상단과 좌측하단의 수평 radius 값은 40px로 주었으며, 수직 radius 값은 각각 10px, 20px, 30px, 40px 로 달리 설정하였다.
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 20px 40px / 10px 20px 30px 40px;
숫자값이 3개가 주어질 경우, 생략된 마지막 좌측하단 값은 대각선 방향인 우측상단 값과 동일하다. 즉, 숫자값 3개는 순서대로 각각 [좌측상단 값] [우측상단과 좌측하단 값] [우측하단 값] 을 의미한다.
예8 :
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 20px 40px 50px;
예9 : 좌측상단의 수평 radius는 20px, 우측상단과 좌측하단의 수평 radius는 40px, 우측하단의 수평 radius는 50px로 설정하였고, 좌측상단과 우측하단의 수직 radius는 20px, 우측상단과 좌측하단의 수직 radius는 40px로 설정하였다. 헉헉.
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 20px 40px 50px / 20px 40px;
+ 아래는 border-radius를 활용하여 만든 도형의 몇가지 예이다.
height: 65px;
width:160px;
border:1px solid black;
border-bottom-right-radius: 50px;
height: 5em;
width: 12em;
border:1px solid black;
border-radius: 1em 4em 1em 4em;
height: 70px;
width: 70px;
border:1px solid black;
border-radius: 35px;
마지막으로, transition을 이용한 호버 효과
.예 {
width: 100px;
height: 100px;
border:1px solid black;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.예:hover {
border-radius: 50px;
background: #2580a2;
}
! 참고한 글 및 참고할 만한 글
border-radius, Mozilla Developer Network
border-radius property, w3schools
Border-radius: create rounded corners with CSS!, CSS3.info
