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.

enter image description here

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/.

TAGS