> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/css/attributes/size/border.md).

# border

## border

`border` 속성은 대상의 **테두리**를 설정한다.

{% embed url="<https://codepen.io/hiphop5782/pen/OJjxZBR>" %}

위와 같이 설정하면 대상 태그의 테두리가 1px 두께의 black(검정) solid(직선) 형태로 생성된다.

border는 각각의 속성들을 따로 설정할 수 있다.

```css
border-width:1px;
border-style:solid;
border-color:black;
```

### border-width

border-width를 이용하여 테두리의 두께를 설정할 수 있다. 적용 가능한 크기 규칙은 다음 문서를 확인한다.

{% content-ref url="/pages/ioirg1gzaHWbpMhCi2ZW" %}
[크기(size)](/web/develop-page/css/develop-guide/size.md)
{% endcontent-ref %}

{% embed url="<https://codepen.io/hiphop5782/pen/QWMqreO>" %}

* 두께를 하나만 설정하면 모든 테두리에 적용된다.
* 두께를 두 개 설정하면 먼저 설정한 두께가 상단과 하단 테두리에, 나중에 설정한 두께가 좌측과 우측 테두리에 설정된다.
* 두께를 세 개 설정하면 먼저 설정한 두께가 상단 테두리에, 두 번째 설정한 테두리가 좌측과 우측 테두리에, 마지막에 설정한 테두리가 하단 테두리에 설정된다.
* 두께를 네 개 설정하면 먼저 설정한 두께가 상단 테두리에 설정되며, 이후에 설정된 두께부터는 시계 방향으로 설정된다.
* 다음 세부 속성으로도 두께를 설정할 수 있다.
  * border-top-width : 상단 테두리 두께
  * border-bottom-width : 하단 테두리 두께
  * border-left-width : 좌측 테두리 두께
  * border-right-width : 우측 테두리 두

### border-color

`border-color`를 이용하여 테두리의 **색상**을 설정할 수 있다. 적용 가능한 색상의 키워드 및 규칙은 다음 문서를 확인한다.

{% content-ref url="/pages/twjrT6uqYjLpYk1SS3Gb" %}
[색상(color)](/web/develop-page/css/develop-guide/color.md)
{% endcontent-ref %}

{% embed url="<https://codepen.io/hiphop5782/pen/abyLGxM>" %}

* 색상을 하나만 설정하면 전체 테두리에 설정된다.
* 색상을 두 개 설정하면 먼저 설정한 색상이 상단과 하단 테두리에, 나중에 설정한 색상이 좌측과 우측 테두리에 설정된다.
* 색상을 세 개 설정하면 먼저 설정한 색상이 상단 테두리에 설정되며, 두 번째 설정한 색상이 좌측과 우측 테두리에 설정되고, 마지막에 설정한 색상이 하단 테두리에 설정된다.
* 색상을 네 개 설정하면 먼저 설정한 색상이 상단 테두리에 설정되며, 이후에 설정한 색상부터는 시계 방향으로 설정된다.
* 다음 세부 속성으로도 색상을 설정할 수 있다.
  * border-top-color - 상단 테두리 색상
  * border-bottom-color - 하단 테두리 색상
  * border-left-color - 좌측 테두리 색상
  * border-right-color - 우측 테두리 색상

### border-style

`border-style`을 이용하여 테두리의 스타일을 지정할 수 있다. 여러 가지의 종류가 각각 키워드로 지정되어 있다.

* none
* hidden
* dotted
* dashed
* solid
* double
* groove
* ridge
* inset
* outset

{% embed url="<https://codepen.io/hiphop5782/pen/dyzVegx>" %}

### border-radius

`border-radius` 속성으로 모서리의 둥근 정도를 설정할 수 있다.

크기를 지정하거나 비율로 설정할 수 있다.

{% embed url="<https://codepen.io/hiphop5782/pen/OJjxZrR>" %}

크기를 하나만 설정할 경우 모든 모서리에 동일한 값이 설정된다.

```css
/* 모든 모서리를 5px만큼 둥글게 설정*/
border-radius: 5px;
```

크기를 두 개 설정할 경우 좌측 상단과 우측 하단 / 좌측 하단과 우측 상단 으로 구분하여 설정할 수 있다.

```css
/* 좌측상단과 우측하단을 10px, 좌측하단과 우측상단을 15px만큼 둥글게 설정*/
border-radius:10px 15px;
```

크기를 네 개 설정할 경우 좌측 상단부터 시계 방향으로 구분하여 설정할 수 있다.

```css
/* 좌측상단 5px, 우측상단 10px, 우측하단 15px, 좌측하단 20px만큼 모서리 둥글게 설정*/
border-radius: 5px 10px 15px 20px;
```