Shorten border length by a percentage?

Hi guys.

Hope you all good and surviving the crazy lockdown.

Anyways, I need some help shortening borders on each side as per the screenshot on this link:

My approach would have been to create two drive and strategically place them behind the video placeholder. Is there a better way to accomplish this?

I’m having trouble understanding what the question is? What in this picture are you trying to move, and how are you trying to move it?
What does your code look like currently?

You could use ::before and ::after on a div that is around the video to create two rectangular blocks and absolutely place them into position as required. Use z-index to move the blocks beneath the video (only positioned elements obey z-index).

I won’t give code as its pretty straight forward but if you do want code then supply the html you have so far :slight_smile:


Sweet. I didn’t think of pseudo-classs selectors for some odd reason… :wink:


I did a demo anyway :slight_smile:


Thank you @PaulOB

It seems like the embed didn’t work, here’s the direct link for anyone whoever needs it:

1 Like

(Off topic)
In case you have restricted Javascript or http requests you need to allow the Codepen domains.
(/Off topic)

1 Like