Only Corner Border for an Element.
HTML
<div class="BorderCorner_wrap">
<div class="BorderCorner">
<img src="https://static.pexels.com/photos/19155/pexels-photo-large.jpg" width="590" height="350" alt="Watch">
</div>
</div>
<p class="demo"></div><a class="readmore" href="http://codeconvey.com/create-css-border-corner/">Find More Details Here</a>
</p>
CSS
@import url(https://fonts.googleapis.com/css?family=Raleway);
body{
font-family: 'Raleway', sans-serif;
background:#fff78e;
}
.BorderCorner_wrap{
text-align:center;
}
.BorderCorner {
border: 2px solid #ca1c1e;
display: inline-block;
margin: 25px auto;
padding: 25px;
position: relative;
width: auto;
}
.BorderCorner img {
position: relative;
display: block;
margin: 0;
padding: 0;
z-index: 5;
}
.BorderCorner::before,
.BorderCorner::after {
content: '';
position: absolute;
background: #fff78e;
}
.BorderCorner::before {
width: calc(100% + 50px + 4px - 120px);
height: calc(100% + 4px);
top: -2px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.BorderCorner::after {
height: calc(100% + 50px + 4px - 120px);
width: calc(100% + 4px);
left: -2px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
/* Demo Purpose Only*/
.demo {
color:#000;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a{
color: #ca1c1e;
}
