How can I erase a border piece using CSS?

Question

I'm trying to create a matrix effect using only HTML/CSS, and the way how i found is to apply a solid border and now erase some piece at top and bottom, someone knows how can I create this effect only using CSS (If it's possible) ?

There is a pic to explain better my objective:

Answer 1

A semantic way is to not give the actual element a border at all! You use :before and :after pseudo elements as transparent boxes on the right and left side. The pseudo elements are given transparent backgrounds and borders that don't overlap the content which creates the effect.

This works with any background: http://jsfiddle.net/kkYrP/8/

.box{
    position:relative;
}
.box:before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    width: 8%;
    border: 2px solid #333;
    border-right:none;
    z-index:1;
}
.box:after{
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom:-2px;
    width: 8%;
    border: 2px solid #333;
    border-left:none;
    z-index:1;
}

Note: if you're having clicking/hovering issues try adding pointer-events:none; on the :before and :after.