border-style 속성의 이해

border-style 속성은 요소의 네 경계면에
테두리가 나타나는지 여부와,
나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.

border-style 속성은 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

border-color 속성의 구성 속성
border-top-style 요소 위쪽 경계면에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
border-bottom-style 요소 아래쪽 경계면에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
border-left-style 요소 왼쪽 경계면에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
border-right-style 요소 오른쪽쪽 경계면에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.

데모

다음의 CSS 데모로 border-style 속성의 사용 방법을 확인해 보세요.

CSS 데모: border-style 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    border-style: <line-style>
}

구문

CSS 
/* 네 측면 모두 적용 */
border-style: none; /* 초깃값 */
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
border-style: solid dotted; /* solid: 위와 아래 측면,
                               dotted: 왼쪽과 오른쪽 측면 */

/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
border-style: solid dotted dashed; /* solid: 위 측면,
                                      dotted: 왼쪽과 오른쪽 측면,
                                      dashed: 아래 측면 */

/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */
/* 시계 방향으로 */
border-style: solid dotted dashed double; /* solid: 위 측면,
                                             dotted: 오른쪽 측면,
                                             dashed: 아래 측면,
                                             double: 왼쪽 측면 */

/* 전역 값 */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

값

테두리의 스타일을 설명합니다. 다음 값을 가질 수 있습니다.

<line-style>

요소의 경계에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
초깃값은 none입니다.

초깃값입니다. 테두리를 표시하지 않습니다.
border-width 속성의 값이 지정되어 있더라도 무시되고 계산된 값은 0이 됩니다.

부연설명
border-width 속성은 요소 경계 테두리의 두께, 즉 너비를 지정합니다.

테이블의 셀과 테두리가 border-collapse: collapse(상쇄된 테두리 표)일 경우 값의 우선순위가 가장 낮습니다. 겹쳐진 다른 테두리가 설정된 경우에는 표시됩니다.

none 값과 마찬가지로 테두리를 표시하지 않습니다.
<line-width> 값이 지정되어 있더라도 무시되고 계산된 값은 0이 됩니다.

하지만, none 값과는 다르게 테이블의 셀과 테두리가 border-collapse: collapse(상쇄된 테두리 표)일 경우 값의 우선순위가 가장 높습니다. 겹쳐진 다른 테두리가 설정된 경우에도 표시되지 않습니다.

둥근 점이 간격을 두고 연속적으로 표시됩니다. 점의 간격은 명세서에 정의되어 있지 않습니다.

예제
HTML 
<p class="dotted">dotted</p>
CSS 
.dotted {
    border-width: 10px;
    border-style: dotted;
    background-color: #c2d089;
}
실제 적용된 모습

직사각형이 간격을 두고 연속적으로 표시됩니다. 사각형의 크기와 간격은 명세서에 정의되어 있지 않습니다.

예제
HTML 
<p class="dashed">dashed</p>
CSS 
.dashed {
    border-width: 10px;
    border-style: dashed;
    background-color: #c2d089;
}
실제 적용된 모습

직선으로 표시됩니다.

예제
HTML 
<p class="solid">solid</p>
CSS 
.solid {
    border-width: 10px;
    border-style: solid;
    background-color: #c2d089;
}
실제 적용된 모습

두 개의 평행한 직선으로 표시됩니다.

예제
HTML 
<p class="double">double</p>
CSS 
.double {
    border-width: 10px;
    border-style: double;
    background-color: #c2d089;
}
실제 적용된 모습

테두리 두께 중앙이 날카롭게 홈이 파인듯한 음영으로 표시됩니다. ridge 값과 반대로 표시됩니다.

예제
HTML 
<p class="groove">groove</p>
CSS 
.groove {
    border-width: 10px;
    border-style: groove;
    background-color: #c2d089;
}
실제 적용된 모습

테두리 두께 중앙이 날카롭게 도드라진 음영으로 표시됩니다. groove 값과 반대로 표시됩니다.

예제
HTML 
<p class="ridge">ridge</p>
CSS 
.ridge {
    border-width: 10px;
    border-style: ridge;
    background-color: #c2d089;
}
실제 적용된 모습

테두리로 인해 요소가 테두리 안쪽으로 눌려 꺼진 것처럼 표시합니다. outset 값과 반대로 표시됩니다.

테이블의 셀과 테두리가 border-collapse: collapse(상쇄된 테두리 표)일 경우에는 groove 값과 동일하게 표시됩니다.

예제
HTML 
<p class="inset">inset</p>
CSS 
.inset {
    border-width: 10px;
    border-style: inset;
    background-color: #c2d089;
}
실제 적용된 모습

테두리로 인해 요소가 테두리 안쪽에서 볼록 솟아 있는 것처럼 표시합니다. inset 값과 반대로 표시됩니다.

테이블의 셀과 테두리가 border-collapse: collapse(상쇄된 테두리 표)일 경우에는 ridge 값과 동일하게 표시됩니다.

예제
HTML 
<p class="outset">outset</p>
CSS 
.outset {
    border-width: 10px;
    border-style: outset;
    background-color: #c2d089;
}
실제 적용된 모습

값 지정하기

border-style 속성은 한 개, 두 개, 세 개, 네 개의 값으로 지정할 수 있습니다.

한 개 값

한 개의 값을 지정하면 이 값이 네 측면 모두에 적용됩니다.

CSS 
/* 네 측면 모두 적용 */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
예제
HTML 
<p>border-style 한 개 값 적용</p>
CSS 
p {
    border-style: dashed;
}
실제 적용된 모습

두 개 값

두 개의 값을 지정하면 첫 번째는 위와 아래 측면, 두 번째는 왼쪽과 오른쪽 측면에 적용됩니다.

CSS 
/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
border-style: solid dotted; /* solid: 위와 아래 측면,
                               dotted: 왼쪽과 오른쪽 측면 */
예제
HTML 
<p>border-style 두 개 값 적용</p>
CSS 
p {
    border-style: solid dotted;
}
실제 적용된 모습

세 개 값

세 개의 값을 지정하면 첫 번째는 위 측면, 두 번째는 왼쪽과 오른쪽 측면, 세 번째는 아래 측면에 적용됩니다.

CSS 
/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
border-style: solid dotted dashed; /* solid: 위 측면,
                                      dotted: 왼쪽과 오른쪽 측면,
                                      dashed: 아래 측면 */
예제
HTML 
<p>border-style 세 개 값 적용</p>
CSS 
p {
    border-style: solid dotted dashed;
}
실제 적용된 모습

네 개 값

세 개의 값을 지정하면 시계 방향 순서대로 첫 번째는 위 측면, 두 번째는 오른쪽 측면, 세 번째는 아래 측면, 네 번째는 왼쪽 측면에 적용됩니다.

CSS 
/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */
/* 시계 방향으로 */
border-style: solid dotted dashed double; /* solid: 위 측면,
                                             dotted: 오른쪽 측면,
                                             dashed: 아래 측면,
                                             double: 왼쪽 측면 */
예제
HTML 
<p>border-style 네 개 값 적용</p>
CSS 
p {
    border-style: solid dotted dashed double;
}
실제 적용된 모습

형식 정의

border-style 속성의 형식 정의
초깃값
  • border-top-style: none
  • border-bottom-style: none
  • border-left-style: none
  • border-right-style: none
적용 요소 모든 요소
상속 아니오
애니메이션 아니오

브라우저의 기본 스타일시트

border-style 초깃값은 none입니다. 이것은 요소의 테두리가 나타나지 않는다는 의미입니다.
하지만, 브라우저의 기본 스타일시트에서 border의 값이 별도로 설정되어 있는 요소들이 있습니다. 이 요소들은 테두리가 나타나 있다는 것을 의미합니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

HTML 
<textarea>textarea</textarea>
<hr>
<input type="text" placeholder="text">
<hr>
<input type="number" placeholder="number">
<hr>
<input type="email" placeholder="email">
<hr>
<input type="search" placeholder="search">
<hr>
<input type="tel" placeholder="tel">
<hr>
<input type="url" placeholder="url">
<hr>
<input type="button" value="input button">
<hr>
<input type="reset" value="input reset">
<hr>
<input type="submit" value="input submit">
<hr>
<button>button</button>
<hr>
<select>
    <option>select</option>
</select>
<hr>
<fieldset>
    <legend>fieldset</legend>
</fieldset>
실제 적용된 모습

브라우저 호환성

border-style 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
border-style 1 12 1 1

Firefox 50 이전에는 모서리가 둥근 테두리 스타일이 마치 border-style: solid인 것처럼 항상 렌더링되었습니다. 이 문제는 Firefox 50에서 수정되었습니다.

명세서

border-style 속성의 명세서 사양
명세서 사양
border-style CSS Backgrounds and Borders Module Level 3
#border-style

참고문헌

같이 보기