border-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
시도해 보기
border-width: thick;
border-width: 1em;
border-width: 4px 1.25em;
border-width: 2ex 1.25ex 0.5ex;
border-width: 0 4px 8px 12px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: #000;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
구성 속성
border-width는 단축 속성으로서 다음의 하위 속성을 포함합니다.
구문
css
/* 키워드 값 */
border-width: thin;
border-width: medium;
border-width: thick;
/* <length> 값 */
border-width: 4px;
border-width: 1.2rem;
/* 세로방향 | 가로방향 */
border-width: 2px 1.5em;
/* 위 | 가로방향 | 아래 */
border-width: 1px 2em 1.5cm;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-width: 1px 2em 0 4rem;
/* 전역 키워드 */
border-width: inherit;
border-width: initial;
border-width: unset;
border-width 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.
- 한 개의 값은 네 면 모두의 테두리 너비를 설정합니다.
- 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 너비를 설정합니다.
- 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 너비를 설정합니다.
- 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 너비를 지정합니다. (시계방향)
값
<line-width>-
테두리의 너비입니다. 0 이상의
<length>또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.thin얇은 테두리 medium중간 테두리 thick굵은 테두리 참고 : 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나
thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.
형식 정의
| 초기값 | as each of the properties of the shorthand:
|
|---|---|
| 적용대상 | all elements. It also applies to ::first-letter. |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand: |
형식 구문
border-width =
<line-width>{1,4}
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
예제
서로 다른 값의 조합
HTML
html
<p id="sval">한 개의 값: 모든 네 면이 6px 테두리</p>
<p id="bival">두 개의 다른 값: 위아래에 2px 테두리, 좌우에 10px 테두리</p>
<p id="treval">세 개의 다른 값: 위에 0.3em, 아래에 9px, 좌우에 0</p>
<p id="fourval">
네 개의 다른 값: "얇은" 위, "중간" 오른쪽, "두꺼운" 아래, 왼쪽 1em
</p>
CSS
css
#sval {
border: ridge #ccc;
border-width: 6px;
}
#bival {
border: solid red;
border-width: 2px 10px;
}
#treval {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#fourval {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
결과
명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
브라우저 호환성
Loading…
같이 보기
- 테두리 관련 단축 속성:
border,border-style,border-color - 테두리 너비 속성:
border-bottom-width,border-left-width,border-right-width,border-top-width