Make Part Of Div Border Transparent Html

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 place it (canvas body

Solution 1:

Since DIVs have only 4 elements (top, bottom, left, right) you can't make part of a border transparent AFAIK.

However, you could create elements that would overlay your div and use relative positioning to build a border to your taste. For example:

<style>.multiborder{
        border:1px solid black;
        border-top:none;
        width:500px;
        height:100px;
        position:relative;
    }
    .top-border-1{
        border-top:2px solid red;
        width:100px;
        position:absolute;
        top:0px;
        right:0px;
    }
    .top-border-2{
        border-top:3px double blue;
        width:300px;
        position:absolute;
        top:0px;
        left:0px;
    }
</style><divclass="multiborder"><divclass="top-border-1"></div><divclass="top-border-2"></div></div>

You can see the result at http://jsfiddle.net/Bekqu/3/.

Solution 2:

Here are two possible ways to do this:

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

HTML:

<divclass="box"></div>

---

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, #00030%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100%8px;
  background-position: 0100%;

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

  width: 100px;
  height: 50px;
}

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

<divclass="box"></div>

---

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: 8px8px0;

  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, #ff5a000, #ffae00100%);
  margin: 0;
}
.box {
  border: solid black;
  border-width: 8px8px0;
  position: relative;
  overflow: hidden;
  margin: 15px10px;
  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;
}

<divclass="box"></div>