CODEWITHSUNDEEP
htmlcss
El Guapo
El Guapo

Reputation: 597

Best way in css to cut the corners of a border out

i have a video that i have overlaid text on top of. This overlay has a border around it, but the design calls for the corners to be cut out. enter image description hereHere is an image of what i want to achieve:

Is there any way to achieve this white border with cut out corners using just simple css, rather than have a load of transparent html elements that are just in there to add borders to.

Upvotes: 3

Views: 6301

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

From my comment: multiple background and gradient (it could be 1pixel image ) DEMO

<div class="cornersOff"><img src="http://lorempixel.com/640/480/cats/1"/></div>

and CSS

.cornersOff {
  position:relative;
  display:inline-block; /* or table or float or width or whatever*/
}
.cornersOff img,
/* not an image ? */ .cornersOff > * {
  display:block;/* or vertical-align:top for inline-block element*/
}
.cornersOff:before {
  content:'';
  height:100%;
  width:100%;
  position:absolute;
  border:solid 10px transparent;/* size here tells how far from borders you want to see these new borders drawn */
  box-sizing:border-box;/* include that border width */
  background:
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) top center no-repeat ,
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) bottom no-repeat,
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) left no-repeat,
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) right no-repeat;
  background-size: 580px 3px,580px 3px , 3px 420px, 3px 420px;
  /* it cactches the click event ? : uncomment this : *//* pointer-events:none*/
}

img tag inside can be an iframe, a video tag or just content.

If you experiment troubles with clicking, you can add to .cornersOff:before the rule : pointer-events:none; so it ill never catch the click event .... if that's an issue when you would set some opacity background-color.

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

jsBin demo

Border without corners css html

.video{
    position:relative;
    width:500px;
    height:300px;
    background:url(//placehold.it/500x300/f0f);
}
.overlay{
    /*Uncomment Bachground to reveal the logic */
    /*background:rgba(0,0,0,0.2);*/
    color:#fff;

    position:absolute;
    width:400px;
    margin:50px;
    height:164px;
    padding:15px 0; /* remember 15 ...*/

    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
}
.overlay:before,
.overlay:after{
    content: " ";
    position:absolute;
    background:#fff;
    width: 3px; /* same as .overlay border width */

    top:5%; /* This is also interesting */
    height:90%; /* Do the math */
}
.overlay:before{left: -15px;} /* :) */
.overlay:after{right: -15px;}

Upvotes: 1

putvande
putvande

Reputation: 15213

You could use :before and :after to draw some borders and play with the margins / width / height a bit to get it right:

div:before { 
    content:'';
    border-top: 4px solid white;
    border-bottom: 4px solid white;
    width: 596px;
    height: 272px;
    margin: 10px 20px;
    position: absolute;
}

div:after { 
    content:'';
    border-left: 4px solid white;
    border-right: 4px solid white;
    width: 612px;
    height: 256px;
    position: absolute;
    margin: 20px 10px;
}

Fiddle

Upvotes: 4

Related Questions