[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/border-left-width [Back]  [Original]

border-left-width - CSS: Cascading Style Sheets | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

border-left-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 7.

CSS border-left-width .

In this article

border-left-width: thick;
border-left-width: 2em;
border-left-width: 4px;
border-left-width: 2ex;
border-left-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-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/* <length>  */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/*   */
border-left-width: inherit;
border-left-width: initial;
border-left-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 typea length

border-left-width = 
<line-width>

<line-width> =
<length [0,]> |
hairline |
thin |
medium |
thick
CSS Borders and Box Decorations Module Level 4 . . .

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-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}

Specification
CSS Backgrounds and Borders Module Level 3
# border-width


Web Proxy Viewer  |  New URL  |  Original Page