Non full-length borders on photos

[ninefootone]

As part of the branding for a project we’re using some custom borders on photos. See here for an example – https://www.dropbox.com/s/msvk8b5cwivyp1f/photos-mockup.pdf?dl=0 – basically borders which are on only certain edges of the photo and of varying ‘lengths’. I’d like to do this in pure CSS if possible but I’m struggling. I’ve managed to get a custom length border on one side (eg. https://staging1.dundonald.org/ – scroll down) but I’m not sure how to then add a border on another side.

Can anyone help?

[ninefootone]

I’m adding the bottom border using this CSS…

.img-border:after {
content: “”;
display: block;
width: 70%;
border-bottom: 20px solid #4a8fc0;
}

[Senff]

Here’s something that may help:

https://codepen.io/senff/pen/wVpLQM

[ninefootone]

This is great, thank you!

[Author]

Posts