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 .

Answer 2

http://jsfiddle.net/kkYrP/5/

Give a border-left and right:

.box {
    border-left:2px solid #333;
    border-right:2px solid #333;
}

And add pseudo elements with negative z-index:

.box:before{
    content:"";
    background:#333;
    position:absolute;
    z-index: -1;
    left:-2px;
    width: 20px;
    top:-2px;
    bottom:-2px;
}
.box:after{
    content:"";
    background:#333;
    position:absolute;
    z-index: -1;
    right:-2px;
    width: 20px;
    top:-2px;
    bottom:-2px;
}

This adresses @David's problems and is based on @James's solution.

Answer 3

working example: http://jsfiddle.net/awesome/4gB43/1/

using background-image and linear-gradient :

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-image#Browser_compatibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Browser_compatibility

CSS:

.wrapper {
    display: inline-block;
    padding: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 100%;
    background-color: black;
    background-image: linear-gradient(white, white);
}
.wrapper-inner {
    display: block;
    background: white;
    padding: 5px;
}
table td {
    border-top: none !important;
}
table {
    margin-bottom: 0 !important;
}

HTML:

<div class="wrapper">
    <div class="wrapper-inner">
        <table class="table">
            <thead class="sr-only">
                <tr>
                    <th>Whatever</th>
                    <th>Again, Whatever</th>
                    <th>Finally, Whatever</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>71571</td>
                    <td>26157</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>-497461.35798</td>
                    <td>-143674.72856</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>-6391.62859</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 4

Extending James Bruckner's response, I recently had to do something similar, but I had to do it with curly braces. Basically, you add the braces as content in :after and :before and you position absolute them. You can see the implementation in the link below.

http://jsfiddle.net/kaNG2/

Your HTML

<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>

Your CSS

div {
    padding:3em;
    font-size:1em;
    width:20em;
    position:relative;
}

div:after,
div:before {
    font-size:6.7em;
    color:#999;
    position:absolute;
    top:0;
}

div:before {
    content: "[";
    left:0;
}

div:after {
    right:0;
    content:"]";
}

Answer 5

I would like to give a simplest alternative, using a linear-gradient on a pseudo-element.
This way doesn't use extra markup, and you won't have any mouse-event issue.

 table.matrix { position: relative; background: white; } table.matrix:before { content: ' '; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; z-index: -1; background-image: linear-gradient(to right, black 10%, white 10%, white 90%, black 90%); } /* Non-required stuff */ td { padding: 3px 5px; } 

 <table class="matrix"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> 

Answer 6

working example: http://jsfiddle.net/awesome/bA7d3/

CSS:

.table.table-custom tr:first-child td:first-child {
    border-top: 2px solid black;
}
.table.table-custom tr:last-child td:first-child {
    border-bottom: 2px solid black;
}
.table.table-custom tr:first-child td:last-child {
    border-top: 2px solid black;
}
.table.table-custom tr:last-child td:last-child {
    border-bottom: 2px solid black;
}
.table.table-custom {
    border-right: 2px solid black;
    border-left: 2px solid black;
}
.table.table-custom td {
    border-top: none;
}

Answer 7

You could draw the braces in elements next to the one containing the numbers. This will give you the effect you want.

CSS

span.leftBrace
{
width:10px;
height:100px;
float:left;
border-width:5px;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:solid;
}
span.rightBrace
{
float:right;
width:10px;
height:100px;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
span.Brace
{
height:100px;
display:inline;
width:200px;
}

HTML

<span class="Brace">
<span class ="leftBrace"> </span>
<span class =""> TEXT</span>
<span class ="rightBrace"> </span>
</span>

Example of working code here: JSFiddle