CSS Design button border top left etc [duplicate] - css

Question

This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 3 years ago.
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.

Answer 3

Something like this is achievable with CSS gradients and multiple backgrounds: http://jsbin.com/usegup/1/edit. But probably SVG background will be more suitable for such cases.

Answer 4

Do you mean something like this: http://jsfiddle.net/FlameTrap/F5bC6/
HTML
<div class="text">
<span class="corner TL"></span>
<span class="corner TR"></span>
<span class="corner BL"></span>
<span class="corner BR"></span>
<div class="text">Text</div>
</div>
CSS
.text {
background: #fff;
width: 300px;
height: 200px;
position: relative;
z-index: 3;
}
.corner {
position: absolute;
background: blue;
width: 20px;
height: 20px;
z-index: 2;
}
.TL {
top: -10px;
left: -10px
}
.TR {
top: -10px;
right: -10px
}
.BL {
bottom: -10px;
left: -10px
}
.BR {
bottom: -10px;
right: -10px
}

Answer 5

Something like this would work and give you less issues in older browsers to boot:
<style>
.blue {
width: 500px;
height: 500px;
position: relative;
}
.corner {
position: absolute;
border-color: blue;
width: 30px;
height: 30px;
}
.tl {
top: 0;
left: 0;
border-top: 2px solid;
border-left: 2px solid;
}
.tr {
top: 0;
right: 0;
border-top: 2px solid;
border-right: 2px solid;
}
.br {
bottom: 0;
right: 0;
border-bottom: 2px solid;
border-right: 2px solid;
}
.bl {
bottom: 0;
left: 0;
border-bottom: 2px solid;
border-left: 2px solid;
}
</style>
<div class="blue">
<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>
</div>