From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/border-radius/index.html | 228 ++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 files/ko/web/css/border-radius/index.html (limited to 'files/ko/web/css/border-radius/index.html') diff --git a/files/ko/web/css/border-radius/index.html b/files/ko/web/css/border-radius/index.html new file mode 100644 index 0000000000..3c9c812d36 --- /dev/null +++ b/files/ko/web/css/border-radius/index.html @@ -0,0 +1,228 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

꼭짓점 반경은 요소의 테두리 존재 여부와는 별개로 전체 {{Cssxref("background")}}에 적용됩니다. 원형 꼭짓점으로 인해 배경이 잘리는 지점은 {{cssxref("background-clip")}} 속성이 지정합니다.

+ +

{{cssxref("border-collapse")}}의 값이 collapse인 표 요소는 border-radius 속성의 영향을 받지 않습니다.

+ +
참고: 다른 단축 속성과 마찬가지로, 각각의 하위 속성이 부모를 상속하도록 할 수는 없습니다. 즉, border-radius: 0 0 inherit inherit처럼 일부만 재정의할 수 없습니다. 대신, 원래의 본디속성을 하나씩 사용하세요.
+ +

구성 속성

+ +

border-radius는 다음 CSS 속성의 단축 속성입니다.

+ + + +

구문

+ +
/* The syntax of the first radius allows one to four values */
+/* Radius is set for all 4 sides */
+border-radius: 10px;
+
+/* top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5%;
+
+/* top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 2px 4px 2px;
+
+/* top-left | top-right | bottom-right | bottom-left */
+border-radius: 1px 0 3px 4px;
+
+/* The syntax of the second radius allows one to four values */
+/* (first radius values) / radius */
+border-radius: 10px 5% / 20px;
+
+/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5% / 20px 30px;
+
+/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Global values */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+ +

border-radius 속성은 다음 방법으로 지정할 수 있습니다.

+ + + +

값

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
radiusall-corner.png테두리의 각 꼭짓점 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 한 개 값 구문에서만 사용합니다.
top-left-and-bottom-righttop-left-bottom-right.png왼쪽 위와 오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 두 개 값 구문에서만 사용합니다.
top-right-and-bottom-lefttop-right-bottom-left.png오른쪽 위와 왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 두 개 또는 세 개 값 구문에서만 사용합니다.
top-lefttop-left.png왼쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 세 개 또는 네 개 값 구문에서만 사용합니다.
top-righttop-right.png오른쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.
bottom-rightbottom-rigth.png오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.
bottom-leftbottom-left.png왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.
+ +
+
{{cssxref("<length>")}}
+
길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 음의 값은 유효하지 않습니다.
+
{{cssxref("<percentage>")}}
+
백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율이고, 세로축 값은 박스의 높이에 대한 백분율입니다. 음의 값은 유효하지 않습니다.
+
+ +

예를 들어...

+ +
border-radius: 1em/5em;
+
+/* 아래와 같음 */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* 아래와 같음 */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +
  border: solid 10px;
+  /* 테두리가 'D'형태가 됨 */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +
  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+ +

라이브 샘플

+ +
    +
  1. http://jsfiddle.net/Tripad/qnGKj/2/
    2. +
  2. http://jsfiddle.net/Tripad/qnGKj/3/
    3. +
  3. http://jsfiddle.net/Tripad/qnGKj/4/
    4. +
  4. http://jsfiddle.net/Tripad/qnGKj/5/
    5. +
  5. http://jsfiddle.net/Tripad/qnGKj/6/
    6. +
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}{{ Spec2('CSS3 Backgrounds') }}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-radius")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf