border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

시도해보기

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

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

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

구성 속성

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

구문

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 속성은 다음 방법으로 지정할 수 있습니다.

한 개에서 네 개의 <length> 또는 <percentage> 값은 꼭짓점의 단일 반지름을 설정합니다.
선택적으로 "/" 이후에 한 개에서 네 개의 <length> 또는 <percentage> 값을 사용해 추가 반지름을 설정해서 타원형 꼭짓점을 만들 수 있습니다.

값

radius		테두리의 각 꼭짓점 반지름을 나타내는 `<length>` 또는 `<percentage>`. 한 개 값 구문에서만 사용합니다.
top-left-and-bottom-right		왼쪽 위와 오른쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 두 개 값 구문에서만 사용합니다.
top-right-and-bottom-left		오른쪽 위와 왼쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 두 개 또는 세 개 값 구문에서만 사용합니다.
top-left		왼쪽 위 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 세 개 또는 네 개 값 구문에서만 사용합니다.
top-right		오른쪽 위 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 네 개 값 구문에서만 사용합니다.
bottom-right		오른쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 네 개 값 구문에서만 사용합니다.
bottom-left		왼쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 네 개 값 구문에서만 사용합니다.

<length>: 길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 음의 값은 유효하지 않습니다.
<percentage>: 백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율이고, 세로축 값은 박스의 높이에 대한 백분율입니다. 음의 값은 유효하지 않습니다.

예를 들어...

css

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;

css

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;

형식 정의

초기값	as each of the properties of the shorthand: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
적용대상	all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`.
상속	no
Percentages	refer to the corresponding dimension of the border box
계산 값	as each of the properties of the shorthand: `border-bottom-left-radius`: two absolute `<length>`s or `<percentage>`s `border-bottom-right-radius`: two absolute `<length>`s or `<percentage>`s `border-top-left-radius`: two absolute `<length>`s or `<percentage>`s `border-top-right-radius`: two absolute `<length>`s or `<percentage>`s
Animation type	as each of the properties of the shorthand: `border-top-left-radius`: a length, percentage or calc(); `border-top-right-radius`: a length, percentage or calc(); `border-bottom-right-radius`: a length, percentage or calc(); `border-bottom-left-radius`: a length, percentage or calc();

형식 구문

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

예제

  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;

라이브 샘플

명세

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

브라우저 호환성

BCD tables only load in the browser

같이 보기

꼭짓점 반경 관련 CSS 속성: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius