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 / 상속(inheritance)

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...

CSS / table-layout / 표(table) 크기 고정시키기

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / CSS를 HTML에 적용시키는 방법

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CSS / Flex / 정가운데 배치하기

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자

CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자

하위 선택자 하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어 div blockquote 는 div 요소의 하위에 있는 blockqoute 요소를 선택합니다. 이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉 <div> <blockquote>...</blockquote> </div> 일 때도 blockquote를 선택하고, <div> <aside> <blockquote>...</blockquote> </aside> </div> 일 때도 blockquote를 선택합니다. 자식 선택자 자식 선택자(Child Selector)는 특정 요소의 자식 ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS / background-color / 배경색을 정하는 속성

CSS / background-color / 배경색을 정하는 속성

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / float와 overflow

CSS / float와 overflow

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

CSS 강좌