DarkxPunk Posted April 8, 2014 Share Posted April 8, 2014 (edited) Hi there, Here is a link to a video and the code outlining the trick: http://code.tutsplus.com/tutorials/quick-tip-multiple-borders-with-simple-css--net-12471 Now I think that is a great trick and thought I could use it for a instance on my site, but on an img rather than a div. I have toiled and tried and can't get it to work... Is it cause the img is inline? Now understand I am trying to do this with relative values which is possible (I have tested it with the div), so keep that in find. I have played with the display of the img, everything, and it does not want to add the second/third border. Here is one of my attempts: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Multi-Borders</title><style>body { background: #d2d1d0; }#box {background: #f4f4f4;border: 8px solid blue;padding: 8px;width: 50%;height: 200px;margin: 60px auto;position: relative;background: url(images/diamonds/cut/cutGraphic.png) no-repeat;}#box:before {border: 8px solid red;content: '';width: 95.5%;height: 100%;position: absolute;}#box:after {content: '';position: absolute;width: 91.5%;height: 100%;border: 8px solid green;left: 8px; top: 8px;}img {border: 8px solid black;padding: 8px;position: relative;display: block;}img:before {border: 50px solid red;content: '';width: 95.5%;height: 100%;position: absolute;}</style></head><body><div id="box"></div><img src="images/diamonds/cut/cutGraphic.png" /></body></html> Thanks for any solutions or input. Edited April 12, 2014 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted April 8, 2014 Share Posted April 8, 2014 :before means before content, :after means after content, img tag self closes and does not contain content like div or paragraph. Link to comment Share on other sites More sharing options...
DarkxPunk Posted April 12, 2014 Author Share Posted April 12, 2014 Well that sucks Thanks for the info. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now