CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius

  • border-radius는 테두리를 둥글게 만드는 속성입니다.
  • CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법)
  • 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다.
  • 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div {
				box-sizing: border-box;
				width: 200px;
				height: 200px;
				margin: 20px auto;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="jb"></div>
	</body>
</html>

문법 1

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y
  • 속성의 값에는 px, % 등 길이 단위를 넣습니다. 그 길이만큼 둥글게 만듭니다.
  • 8군데의 길이를 정해야 하는데, 각 위치는 다음과 같습니다.

예제 1

.jb {
	border-radius: 20px 40px 60px 80px / 80px 60px 40px 20px;
}

위치별로 다른 크기를 넣은 예제입니다. 어느 값이 어디 위치를 가리키는지 확인할 수 있습니다.

문법 2

border-radius: aa bb / cc dd
  • 대각선 방향으로 값이 같을 때 사용할 수 있습니다.
  • 다음과 의미가 같습니다.
border-radius: aa bb aa bb / cc dd cc dd

예제 2

.jb {
	border-radius: 40px 80px / 80px 40px;
}

문법 3

border-radius: aa / bb
  • 네 곳이 모두 같을 때 사용할 수 있습니다.
  • 다음과 의미가 같습니다.
border-radius: aa aa aa aa / bb bb bb bb

예제 3

.jb {
	border-radius: 80px / 40px;
}

문법 4

border-radius: aa bb cc dd
  • 가로 방향과 세로 방향의 값이 같다면 앞에 부분만 쓸 수 있습니다.
  • 다음과 의미가 같습니다.
border-radius: aa bb cc dd / aa bb cc dd

예제 4

.jb {
	border-radius: 20px 40px 60px 80px;
}

문법 5

border-radius: aa bb
  • 다음과 의미가 같습니다.
border-radius: aa bb aa bb / aa bb aa bb

예제 5

.jb {
	border-radius: 40px 80px;
}

문법 6

border-radius: aa
  • 다음과 의미가 같습니다.
border-radius: aa aa aa aa / aa aa aa aa

예제 6

.jb {
	border-radius: 50%;
}

위치별 속성

각 위치를 가리키는 속성이 따로 있습니다. 예를 들어

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

는 다음과 같습니다.

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

값을 하나만 쓰면 가로 방향과 세로 방향의 값이 같다는 뜻입니다. 예를 들어

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

는 다음과 같습니다.

border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;

Related Posts

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / tab-size / 탭 크기 설정하는 속성

CSS / tab-size / 탭 크기 설정하는 속성

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

CSS / 애니메이션 / animation

CSS / 애니메이션 / animation

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...

CSS / float와 overflow

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS / 박스 모델(Box Model)

CSS / 박스 모델(Box Model)

Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 ...

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

CSS / opacity / 요소를 투명하게 만드는 속성

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

CSS 강좌