Forums

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

Home Forums CSS Inset Image Borders

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #34176
    Brightonmike
    Member

    Inset CSS3 borders don’t play ball with images. The images always sit on top.

    This is my best solution: http://jsfiddle.net/brightonmike/yuDk4/

    But it’s not at all semantic. It’s a bit…hacky.

    Anyone got a better way? I’m thinking psuedo classes could come in use?

    #86484

    You could go the background image path: http://jsfiddle.net/sl1dr/mydMp/

    #86485
    Brightonmike
    Member

    Won’t work for user generated content.

    #86496
    TheDoc
    Member

    It would if you can get the URL of the image:

    http://jsfiddle.net/mydMp/3/

    #86499
    Brightonmike
    Member

    Ohh, nice! :D

    #86536

    Well played @TheDoc.

    @Brightonmike Keep in mind that this technique has accessibility issues (e.g. no alt text).

    #152861
    mizaco
    Participant

    Hey I need to apply a inset transparent 1px border to a img tag because I don’t know the dimensions of the image, so I cant really use it as a background. Is there a way this can work with a dynamic size img tag? Someone please respond with the best solution.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.