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 is trasparent) over div element.
Answers:
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>
<div class="multiborder">
<div class="top-border-1"></div>
<div class="top-border-2"></div>
</div>
You can see the result at http://jsfiddle.net/Bekqu/3/.