make part of div border transparent html

Question

Can I make part (from x1 to x2) of div border transparent?

If not what approach can you advice?

My idea [very bad] is to draw border in canvas element and

Answer 1

Here are two possible ways to do this:

Required HTML will remain the same in both methods and is as follows:

HTML:

---

Method #01:

1. Draw the top, right and left borders with border css property.
2. Draw the bottom transparent border with linear-gradient css property.

CSS:

.box {
  /* Following css will create bottom border */
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;

  /* Following css will create top, left and right borders */
  border: solid #000;
  border-width: 8px 8px 0;

  width: 100px;
  height: 50px;
}

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}
.box {
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;
  border: solid #000;
  border-width: 8px 8px 0;
  margin: 20px 15px;
  width: 100px;
  height: 50px;
}

---

Method #02:

1. Draw the top, right and left borders with border css property.
2. Draw the bottom borders with :before and :after pseudo elements.

CSS:

.box {
  /* Following css will create top, left and right borders */
  border: solid black;
  border-width: 8px 8px 0;

  position: relative;
  overflow: hidden;
  width: 100px;
  height: 50px;
}

/* Following css will create bottom border */
.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 8px;
  width: 30%;
  bottom: 0;
  left: 0;
}

.box:after {
  left: auto;
  right: 0;
}

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}
.box {
  border: solid black;
  border-width: 8px 8px 0;
  position: relative;
  overflow: hidden;
  margin: 15px 10px;
  width: 100px;
  height: 50px;
}

.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 8px;
  width: 30%;
  bottom: 0;
  left: 0;
}

.box:after {
  left: auto;
  right: 0;
}