View Full Version : CSS Inner border?

12-23-2010, 07:59 PM
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?

12-23-2010, 08:02 PM
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.

12-23-2010, 08:12 PM
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.

Major Payne
12-24-2010, 09:30 AM
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<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;

<!--[if IE]>
<style type="text/css">
div#inner-border {
position: relative;
top: 25px;
left: 25px;
border: 1.25em ridge #0f0;

<div id="image"><div id="inner-border"></div></div>

12-24-2010, 12:22 PM
Hi there sterlingcooper,

here is another example for you to try...

<html lang="en">

<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-color:#000 #444 #666 #222;
margin:40px auto;
-moz-box-shadow:#33333c 22px 22px 44px;
-webkit-box-shadow:#33333c 22px 22px 44px;
box-shadow:#33333c 22px 22px 44px;
#image-container img {
margin:-100px 0 0 -100px; /* negative margin values are equal to the border width */


<div id="image-container">
<img src="http://www.coothead.co.uk/images/blood.jpg" alt="">