How to Show Only Corner Border with CSS

Today we have a small tip for you to show the CSS border only in the corner of HTML element such image or heading.

That isn’t hard to do, We need to use the :after and :before CSS pseudo-elements to get this done. We also use a few other CSS properties to make this border get done.

Let’s get started!

The HTML markup is simple and easy to understand. We need to place an image inside the div. In our markup, you see we have used two divs.

The first one nothing to do with actual border, this is the only place to align the image center. The div with class BorderCorner is the main div to handle all the CSS function.

<div class="BorderCorner_wrap">
    <div class="BorderCorner">
        <img src="https://static.pexels.com/photos/19155/pexels-photo-large.jpg" width="690" height="393" alt="Watch">
    </div>
</div>

How to Show CSS Only Corner Border

Let’s create the CSS border as we usually make using border property and define the size as you need.

Remember that, if you change the border size from 2px to something else, you also need to change a few other factors.

The display inline-block is a major factor to align the image and border properly. As for as padding, if you want to keep the border bit away from the picture corner then you should need to add some padding as per you need.

To show the edge or corner border correctly we also need position relative, but the margin and width can be as per need.

.BorderCorner {
    border: 2px solid #ca1c1e;
    display: inline-block;
    margin: 25px auto;
    padding: 25px;
    position: relative;
    width: auto;
}

An important thing here to notice that we need to add z-index so we need to set the position relative for it.

.BorderCorner img {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  z-index: 5;
}

As I explain to you above that we need to use the :before and :after so we need that for border corner. We only add content “”; and position absolute for both. The background will show the image and it allows us to hide the remaining border.

.BorderCorner::before,
.BorderCorner::after {
content: ”;
position: absolute;
background: #fff;
}

Now we define some CSS property for :before the element, and you see, we have use calc for width and height. What we do here to calculate the sizes of the border. We also used the transform translateX with the value -50%.

.BorderCorner::before {
  width: calc(100% + 50px + 4px - 120px);
  height: calc(100% + 4px);
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

Finally, we do the same thing with :after the property and define the same values, but the transform will be change into Y-axis.

.BorderCorner::after {
  height: calc(100% + 50px + 4px - 120px);
  width: calc(100% + 4px);
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

It will add up bit beauty to display images. Hope you find this trick useful.