box using HTML/CSS but is open at the top right?

Question

I have a div which has style properties as "border-top, left, right, bottom" set. But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).

How can this be done?

I think there is a property in CSS called "border-top-width" but there is no "border-top-length".

Can it be done using CSS? Any other approaches are also welcome.

Thanks...

Answer 1

I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...

<div style="border:1px solid black; background-color: white;">
    <div id="borderHack"></div>
    Your content here
</div>

And style the "hack" element like so:

#borderHack {
   float: right;
   margin-right: 1px;
   background-color: white; /*This would have to be the same as the background*/
   height: 3px;
   width: 1px;
}

Answer 2

You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.

Answer 3

I don't believe you can do this with CSS alone.

You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.

Answer 4

You can do that using what's explained in this link http://www.css3.info/preview/border-image/

Basically what you would do is draw a box without the top corners and assign it as border-image

Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.

Answer 5

You might as well try this (relative+absolute positioning) almost the same with float:

<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
    some content here
    <div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>