border-left-width

Property Variable Name

border-left-width

Available Values for border-left-width

medium|thin|thick|20px|initial|inherit

Example using border-left-width medium

Here is an example using border-left-width:medium;

Code

<style>
/* Some Styles so we can see the element */
.rainbow {
  background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.demo-box-1 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:20px solid #000;
  /*border-image:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg) 30 round;*/
}
.demo-box-1 {
  /* this is the test property */
  border-left-width:medium;
}

</style>
<h2>Example using border-left-width medium</h2>
<p>Here is an example using <code>border-left-width:medium;</code></p>
<div class='rainbow demo-box-1'>
</div>

Example using border-left-width thin

Here is an example using border-left-width:thin;

Code

<style>
/* Some Styles so we can see the element */
.rainbow {
  background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.demo-box-2 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:20px solid #000;
  /*border-image:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg) 30 round;*/
}
.demo-box-2 {
  /* this is the test property */
  border-left-width:thin;
}

</style>
<h2>Example using border-left-width thin</h2>
<p>Here is an example using <code>border-left-width:thin;</code></p>
<div class='rainbow demo-box-2'>
</div>

Example using border-left-width thick

Here is an example using border-left-width:thick;

Code

<style>
/* Some Styles so we can see the element */
.rainbow {
  background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.demo-box-3 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:20px solid #000;
  /*border-image:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg) 30 round;*/
}
.demo-box-3 {
  /* this is the test property */
  border-left-width:thick;
}

</style>
<h2>Example using border-left-width thick</h2>
<p>Here is an example using <code>border-left-width:thick;</code></p>
<div class='rainbow demo-box-3'>
</div>

Example using border-left-width 20px

Here is an example using border-left-width:20px;

Code

<style>
/* Some Styles so we can see the element */
.rainbow {
  background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.demo-box-4 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:20px solid #000;
  /*border-image:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg) 30 round;*/
}
.demo-box-4 {
  /* this is the test property */
  border-left-width:20px;
}

</style>
<h2>Example using border-left-width 20px</h2>
<p>Here is an example using <code>border-left-width:20px;</code></p>
<div class='rainbow demo-box-4'>
</div>

Example using border-left-width initial

Here is an example using border-left-width:initial;

Code

<style>
/* Some Styles so we can see the element */
.rainbow {
  background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.demo-box-5 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:20px solid #000;
  /*border-image:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg) 30 round;*/
}
.demo-box-5 {
  /* this is the test property */
  border-left-width:initial;
}

</style>
<h2>Example using border-left-width initial</h2>
<p>Here is an example using <code>border-left-width:initial;</code></p>
<div class='rainbow demo-box-5'>
</div>

Example using border-left-width inherit

Here is an example using border-left-width:inherit;

Code

<style>
/* Some Styles so we can see the element */
.rainbow {
  background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.demo-box-6 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:20px solid #000;
  /*border-image:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg) 30 round;*/
}
.demo-box-6 {
  /* this is the test property */
  border-left-width:inherit;
}

</style>
<h2>Example using border-left-width inherit</h2>
<p>Here is an example using <code>border-left-width:inherit;</code></p>
<div class='rainbow demo-box-6'>
</div>