CODEWITHSUNDEEP
bordercss
l2aelba
l2aelba

Reputation: 22147

any border blank space trick ? for CSS

I need some trick to insert border blank space by using CSS like this..

any border blank space trick ? for CSS

I using CSS box-shadow like this

 box-shadow:
        -1px 0px 0px 0px #000,
        0px -1px 0px 0px #000,
        0px 1px 0px 0px #000,
        1px 1px 0px 0px #000

I have no idea how to make border / shadow look like the picture.

I will use only one html element.. <div></div>

Any trick ?

Playground : http://jsfiddle.net/ES66k/

Upvotes: 3

Views: 3675

Answers (4)

l2aelba
l2aelba

Reputation: 22147

div {
  width:300px;
  height:170px;
  margin:100px;
  position:relative;

 background:#ccc;

}

div:before, div:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
}
div:before {
    width:280px; /*****-20px*****/
    height:168px; /*****-2px*****/

    margin-left:10px;
    border-top:1px solid #f00;
    border-bottom:1px solid #f00;
}
div:after {
    width:298px; /*****-2px*****/
    height:150px; /*****-20px*****/

    margin-top:10px;
    border-left:1px solid #f00;
    border-right:1px solid #f00;
}

Demo : http://jsfiddle.net/ES66k/4/

Done now, Don't need to set background-color :D

But thanks @Fabrizio Calderan anyway :D

Upvotes: 0

Панайот Толев
Панайот Толев

Reputation: 6607

You can create 4 <div>'s with classes .top-left, .top-right, .bottom-left and .bottom-right. Make them absolute and the container relative. Size them, make them the color of the containers bg-color and get them to the corners with top, right, bottom and left properties. Their value must be minus the border width. Here is example of element with 3px border:

HTML:

<div class="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

CSS:

.box{
    width: 300px;
    height: 300px;
    border: 3px solid #666;
    position:relative; 
}

.corner{
    width: 10px;
    height: 10px;
    background-color: #fff; 
    position: absolute;
}

.top-left{
    top: -3px;
    left: -3px;
}
.top-right {
    top: -3px;
    right: -3px;
}
.bottom-left{
    bottom: -3px;
    left: -3px;
}
.bottom-right{
    bottom: -3px;
    right: -3px;
}

Upvotes: 2

palaѕн
palaѕн

Reputation: 73896

Try to use the CSS3 attribute border-image:

Here's a demo you can have a look and try out yourself: CSS3 border-image

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

with one div only: http://jsfiddle.net/ES66k/1/ (tested on Fx18 and chrome)

div {
  width:300px;
  height:170px;
  margin:100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

div:after, div:before {
   content: "";
   position: absolute;
   top: -1px;
   width: 20px;
   height: 172px;
   border-top: 40px white solid;
   border-bottom: 40px white solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }

It's bit hacky, anyway, since it's relying on a fixed height and on a solid color as background (white) but maybe could be useful for your purpose.

Upvotes: 3

Related Questions