border-bottom-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ì.
CSS border-bottom-width ìì±ì ììì ìë í
ë리 ëë¹ë¥¼ ì§ì í©ëë¤.
ìëí´ ë³´ê¸°
border-bottom-width: thick;
border-bottom-width: 2em;
border-bottom-width: 4px;
border-bottom-width: 2ex;
border-bottom-width: 0;
<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;
}
구문
css
/* í¤ìë ê° */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> ê° */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* ì ì ê° */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;
ê°
<line-width>-
í ë리ì ëë¹ì ëë¤. 0 ì´ìì
<length>ëë í¤ìë를 ì¬ì©í ì ììµëë¤. í¤ìëë ë¤ì ì¸ ê°ì§ ì¤ íëì¬ì¼ í©ëë¤.thinìì í ë리 mediumì¤ê° í ë리 thickêµµì í ë리 ì°¸ê³ : ê° í¤ìëì 굵기를 ì ìí ëª ì¸ë ì기 ë문ì ê²°ê³¼ë 구íë³ë¡ ìì´í ì ììµëë¤. ë¤ë§ 굵기ë ì¸ì ë
thin ⤠medium ⤠thickì´ê³ , íëì 문ì ë´ìì ëì¼í©ëë¤.
íì ì ì
| ì´ê¸°ê° | medium |
|---|---|
| ì ì©ëì | all elements. It also applies to ::first-letter. |
| ìì | no |
| ê³ì° ê° | the absolute <length>, snapped as a line width |
| Animation type | a length |
íì 구문
border-bottom-width =
<line-width>
<line-width> =
<length [0,â]> |
hairline |
thin |
medium |
thick
ìì
ìë í ë리ì ëë¹ ë¹êµ
HTML
html
<div>Element 1</div>
<div>Element 2</div>
CSS
css
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
ê²°ê³¼
ëª ì¸
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
ë¸ë¼ì°ì í¸íì±
ê°ì´ 보기
- í
ë리 ëë¹ ê´ë ¨ CSS ìì±:
border-left-width,border-right-width,border-top-width, andborder-width. - ìë í
ë리 ê´ë ¨ CSS ìì±:
border,border-bottom,border-bottom-style, andborder-bottom-color.