Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts

    CSS Inner border?

    Hi, I was wondering if there is a way to apply a border to an image but have that border be on the inside of the image, and not the outside.

    For example in Photoshop you can specify that the border goes inside or outside, in CSS it appears the default is outside... is there an easy way to pull that border in so that it masks a bit of the image?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    why not just create that look in photoshop and save it...lol that would seem much simpler than doing it with css....unless of course you were doing hundreds of images.

    Well you could then do a batch job in PS for that as well.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    yeah I had multiple images like that, with a border and drop shadow in photoshop... but if I want to change the border color/delete the border, or remove the drop shadow at a later date I can't edit it instantly site wide with photoshop, so I want to keep the borders and shadows in CSS if at all possible.

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Something I threw together although you will probably have to make plenty of changes to fit your situations. Only checked in Firefox. I'm sure there're other ways of doing it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <meta name="created" content="Fri, 24 Dec 2010 08:03:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    
     <style type="text/css">
     * { margin: 0; padding: 0; border: 0; }
        
    div#image {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    margin-top: 10%;
    background: url(http://img602.imageshack.us/img602/6672/innerborder.png) no-repeat center scroll;
    }
    
    div#inner-border {
    position: relative;
    top: 27px;
    left: 25px;
    width: 300px;
    height: 300px;
    border: 2em ridge #0f0;
    }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    div#inner-border {
    position: relative;
    top: 25px;
    left: 25px;
    border: 1.25em ridge #0f0;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    <div id="image"><div id="inner-border"></div></div>
    </body></html>
    Last edited by Major Payne; 12-24-2010 at 08:56 AM.
    ☠ ☠RON☠ ☠

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there sterlingcooper,

    here is another example for you to try...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>border inside image</title>
    
    <style type="text/css">
    #image-container {
        width:568px;               /* width of image minus twice the border width */
        height:312px;              /* height of image minus twice the border width */
        border-width:100px;
        border-style:solid;
        border-color:#000 #444 #666 #222;
        margin:40px auto;
        overflow:hidden;
       -moz-box-shadow:#33333c 22px 22px 44px;
       -webkit-box-shadow:#33333c 22px 22px 44px;
       box-shadow:#33333c 22px 22px 44px;
     }
    #image-container img {
        display:block;
        width:768px;
        height:512px;
        margin:-100px 0 0 -100px;  /* negative margin values are equal to the border width */
     }
    </style>
    
    </head>
    <body>
    
    <div id="image-container">
     <img src="http://www.coothead.co.uk/images/blood.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 12-24-2010 at 01:08 PM. Reason: tweaked the border colors


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •