Using CSS to create custom borders with just the corners showing [duplicate]

Question

Here's a CSS brainteaser for you. I want to create a border with just the corners around a text field, like the image below:

I thought about creating 2 rectangle divs, one with blue border and the other white and then overlaying them, but this didn't seem very elegant (e.g. it wouldn't work well if I wanted to vary the background).

Any ideas how else I might do this?

EDIT:

Here's the HTML:

<div class="blue white1 white">text</div>

.blue {

border: blue 4px solid;
etc..
}

Answer 1

Using one div, and one node for targeting. http://jsfiddle.net/eCEds/2/

HTML:

<div class="blue white1 white"><p>Text</p></div>

CSS:

.blue {position:relative;width:400px;height:300px;}
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
    position:absolute;
    width:80px; height: 80px;
    border-color:blue;
    border-style:solid;
    content: ' ';
}
.blue:before {top:0;left:0;border-width: 4px 0 0 4px}
.blue:after {top:0;right:0;border-width: 4px 4px 0 0}
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}

Answer 2

.text
{
    border: 1px solid #00f;
    height: 200px;
    position: relative;
    width: 200px;
}
.text:after
{
     position:absolute;
     top: 10%;
     height: 80%;
     content: "";
     width: 99%;
     left: -3px;
     border-left: 5px solid #fff;
     border-right: 5px solid #fff;
}
.text:before
{
     position:absolute;
     left: 10%;
     height: 99%;
     content: " ";
     width: 80%;
     top: -3px;
     border-top: 5px solid #fff;
     border-bottom: 5px solid #fff;  
}

<div class="text">test test gfgfgf gfg f</div>

This is my variant.