Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Non full-length borders on photos

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #293922
    ninefootone
    Participant

    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?

    #293923
    ninefootone
    Participant

    I’m adding the bottom border using this CSS…

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

    #293925
    Senff
    Participant

    Here’s something that may help:

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

    #293926
    ninefootone
    Participant

    This is great, thank you!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.