박스 테두리를 꾸미긴 꾸몃는데 여진히 심심하다면 박스 모서리를 등글게 만들어 박스 형태를 바꿀 수 있습니다. border-radius 속성을 이용하면 박스 모서리 부분을 손쉽게 다양한 형태로 처리할 수 있습니다.
border-radius
border-radius 속성은 테두리를 둥글게 만드는 속성입니다.
문법
border-radius : ax bx cx dx / ay by cy dy
- 속성의 값에는 px, % 등 길이 단위를 넣습니다.
- 그 길이만큼 둥글게 만듭니다.
예제
다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다.
<div class="box"></div>
.lbbox.eg {
width: 200px;
height: 200px;
margin: 20px 0;
background-color: orange;
}
예제 1
- border-radius 속성에는 8개의 값을 넣을수 있습니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
만약 같은 값이 여러개라면 짧게 줄여 쓸 수 있습니다.
예제 2
border-radius: aa bb / cc dd
border-radius: aa bb aa bb / cc dd cc dd
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 3
border-radius: aa / bb
border-radius: aa aa aa aa / bb bb bb bb
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 4
border-radius: aa bb cc dd
border-radius: aa bb cc dd / aa bb cc dd
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 5
border-radius: aa bb
border-radius: aa bb aa bb / aa bb aa bb
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 6
border-radius: aa
border-radius: aa aa aa aa / aa aa aa aa
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
- 길이단위로 % 속성도 적용할 수 있습니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.