[HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius)

 

border-radius

<div >
<div id='ex1'>
  30px
</div>
<div id='ex2'>
  30%
</div>


<div id='ex3'>
  30px, 10px
</div>
<div id='ex4'>
  30px, 10px, 50px
</div>

<div id='ex5'>
  10px, 20px, 30px, 40px
</div>
</div>

#ex1 {
  background-color : green;
  border-radius: 30px;
}

#ex2 {
  background-color : red;
  border-radius: 30%;
}

#ex3 {
  background-color : gray;
  border-radius: 30px 10px;
}

#ex4 {
  background-color : lightpink;
  border-radius: 30px 10px 50px;
}

#ex5 {
  background-color : purple;
  border-radius: 10px 20px 30px 40px;
}

#ex1, #ex2, #ex3, #ex4, #ex5 {
  width: 100px;
  height: 100px;
  display:table-cell;
  vertical-align:middle;
}

 

div의 모서리를 둥글게 하기 위해서는 css의 border-radius 속성을 사용합니다.

이 속성은 단축 속성으로,

최소 1개부터 8개까지 값을 지정할 수 있는데

위 예제는 값을 1개~4개까지 지정한 예제입니다.

이 속성에 입력되는 값은 원의 반지름이나, 

타원의 짧은 반지름, 긴 반지름입니다.

이 값은 px 또는 % 단위로 입력할 수 있습니다.

 

속성값의 개수에 따라서, radius를 적용하는 위치가 달라집니다.

 속성값이 1개이면 

  - 모든 모서리에 radius 값을 적용합니다.

 속성값이 2개이면 

  - 첫번째 값은 왼쪽 상단, 오른쪽 하단 모서리

  - 두번째 값은 오른쪽 상단, 왼쪽 하단 모서리

 속성값이 3개이면 

  - 첫번째 값은 왼쪽 상단 모서리

  - 두번째 값은 오른쪽 상단, 왼쪽 하단 모서리

  - 세번째 값은 오른쪽 하단 모서리

 속성값이 4개이면 

  - 순서대로 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 (시계 방향)

 

4개의 속성을 각각 정의하고 싶으면 아래 속성들을 직접 정의할 수도 있습니다.

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

이 속성을 정의하는 방법은 아래에서 다시 정리하도록 하겠습니다.

 

원 모양 만들기

<div>
  <div id='ex1'>
    50%
  </div>
</div>

#ex1 {
  background-color : green;
  border-radius: 50%
}

#ex1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

 

div가 정사각형이고, border-radius 의 값을 50%로 하면,

원 모양으로 테두리가 만들어집니다.

 

 

 

각 모서리 변마다 값 지정하기

<div>
  <div id='ex1'>
    10px 20px 30px 40px / 50px 60px 70px 80px
  </div>
</div>

#ex1 {
  background-color : green;
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
}

#ex1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

 

위 예제와 같이 중간에 '/'를 넣고 값을 입력하면, 

각 모서리의 양쪽 변마다 값을 지정할 수 있습니다.

위 예제를 그림으로 표현하면 아래와 같습니다.

 

 

'/'를 중심으로 왼쪽의 값은 순서대로 각 모서리의 가로변의 값이고

오른쪽의 값은 순서대로 각 모서리의 세로변의 값입니다.

각 값은 그림과 같이 왼쪽 상단 모서리에서 시작하여 시계 방향으로 읽으면 됩니다.

 

 

<div>
  <div id='ex1'>
    10px 100px / 30px
  </div>
</div>

#ex1 {
  background-color : green;
  border-radius: 10px 100px / 30px;
}

#ex1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

 

가로 변, 세로 변 모두 속성값의 갯수는 1~4개로 지정해서 사용할 수 있습니다.

 

가로 또는 세로변의 속성 값이 1개일 때, 2개일 때, 3개일 때, 4개일 때

각 숫자의 의미는

첫번째 예제에서 설명한 것과 같습니다.

 

 가로축(또는 세로축)의 속성 값이 1개일 때 

  - 4개 모서리의 가로변(세로변) 값에 이 radius 값을 적용합니다.

 가로축(또는 세로축)의 속성 값이 2개일 때 

  - 첫번째 값은 왼쪽 상단, 오른쪽 하단 모서리의 가로변(세로변)

  - 두번째 값은 오른쪽 상단, 왼쪽 하단 모서리의 가로변(세로변)

 가로축(또는 세로축)의 속성 값이 3개일 때 

  - 첫번째 값은 왼쪽 상단 모서리의 가로변(세로변)

  - 두번째 값은 오른쪽 상단, 왼쪽 하단 모서리의 가로변(세로변)

  - 세번째 값은 오른쪽 하단 모서리의 가로변(세로변)

 가로축(또는 세로축)의 속성 값이 4개일 때 

  - 순서대로 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단의 가로변(세로변)

 

 

border-top-left-radius / border-top-right-radius

border-bottom-right-radius /border-bottom-left-radius

<div>
  <div id='ex1'>
    border-radius
  </div>
<div>
  <div id='ex2'>
    border-top-left-radius 
    border-top-right-radius 
    border-bottom-right-radius 
    border-bottom-left-radius
  </div>
</div>

#ex1 {
  background-color : lightgreen;
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
}

#ex2 {
  background-color : lightpink;
  border-top-left-radius : 10px 50px;
  border-top-right-radius : 20px 60px;
  border-bottom-right-radius : 30px 70px;
  border-bottom-left-radius : 40px 80px;
}

#ex1, #ex2 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

 

border-radius 속성대신 다음 4개의 속성을 사용할 수도 있습니다.

border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius 

 

첫번째 초록색 div는 border-radius 속성을 사용하였고,

두번째 빨간색 div는 

border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius 속성을 사용하여 같은 모양을 표현하였습니다.

 

즉, border-top-left-radius가 2개의 값을 가지면 

첫번째 값은 왼쪽 상단 모서리의 가로변의 값,

두번째 값은 왼쪽 상단 모서리의 세로변의 값을 나타냅니다.

 

<div>
  <div id='ex1'>
    border-radius
  </div>
<div>
  <div id='ex2'>
    border-top-left-radius 
    border-top-right-radius 
    border-bottom-right-radius 
    border-bottom-left-radius
  </div>
</div>

#ex1 {
  background-color : lightgreen;
  border-radius: 10px 30px 50px 70px;
}

#ex2 {
  background-color : lightpink;
  border-top-left-radius : 10px;
  border-top-right-radius : 3px;
  border-bottom-right-radius : 50px;
  border-bottom-left-radius : 70px;
}

#ex1, #ex2 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

 

위 예제처럼 border-top-left-radius가 1개의 값을 가지면,

그 값은 왼쪽 상단 모서리 전체(가로, 세로)에 적용됩니다.

 

---

 

border-radius 속성과 그와 연관된 속성들을 가지고

div의 테두리를 곡선으로 만드는 방법을 정리해 보았습니다.

이 예제들에서는 div의 배경색을 지정하여 테두리를 보여주고,

테두리선을 명시적으로 표시해 주지는 않았습니다.

테두리선을 직접 보여주고 싶다면 이전의 border 속성 관련 포스팅을 참조하세요.