테두리 둥글게 만드는 속성

CSS
Created 2018-11-07 Last Modified 2024-04-01

1 border-radius
2 문법 1
3 예제 1
4 문법 2
5 예제 2
6 문법 3
7 예제 3
8 문법 4
9 예제 4
10 문법 5
11 예제 5
12 문법 6
13 예제 6
14 위치별 속성

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;

CSS

CSS / 도형 만들기 / 마름모

마름모는 삼각형을 두 개 붙여서 만든다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣는다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만든다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것이다. .rhombus { width: 0px; height: 0px; border-right: 200px solid #666666; border-top: 100px solid transparent; border-bottom: ...

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

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

CSS / border-style / 테두리 모양 정하는 속성

CSS / 자동 증가하는 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있다. 이때 사용하는 속성은 counter-reset, counter-increment, counter이다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정한다. 그리고 counter로 일련 번호를 붙인다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 도형 만들기 / 원, 타원

CSS의 border-radius 속성으로 원을 만들 수 있다. 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { ...

CSS / 배경색만 투명하게 만들기

배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...

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

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

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / padding - 안쪽 여백, margin - 바깥 여백

여백에는 안쪽 여백과 바깥 여백이 있다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정한다. 여백을 정하면 요소의 크기가 바뀔 수 있다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정한다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 ...