CSS Outside Border

Css Problem Overview

I want to be able to draw a border OUTSIDE of my Div! So if my div is say 20px by 20px, I want a 1px border outside of this (so in essence, I get a div 22x22px large).

I understand that I can just make the div 22x22 to start with, but for reasons I have, I need the borders to be on the outside.

CSS outline works, but I want only border-bottom or border-top thingy, so something like outline-bottom, which does not work, is what I want.

Is there a way to do this?

Thanks

Css Solutions

Solution 1 - Css

I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.

Look at the simple example below in your browser:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.

You can read more about it here:
Border
Outline

Solution 2 - Css

Try the outline property W3Schools - CSS Outline

Outline will not interfere with widths and lenghts of the elements/divs!

Please click the link I provided at the bottom to see working demos of the the different ways you can make borders, and inner/inline borders, even ones that do not disrupt the dimensions of the element! No need to add extra divs every time, as mentioned in another answer!

You can also combine borders with outlines, and if you like, box-shadows (also shown via link)

<head>
   <style type="text/css" ref="stylesheet">
      div {
        width:22px;
        height:22px;
        outline:1px solid black;
      }
   </style>
</head>
<div>
    outlined
</div>

Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value:

div {border: inset solid 1px black};

But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.

Hope this helps

PS: I also was inspired to make this for you : Using borders, outlines, and box-shadows

Solution 3 - Css

IsisCode gives you a good solution. Another one is to position border div inside parent div. Check this example http://jsfiddle.net/A2tu9/

UPD: You can also use pseudo element :after (:before), in this case HTML will not be polluted with extra markup:

.my-div {
    position: relative;
    padding: 4px;
    ...
}
.my-div:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 1px #888 solid;
}

Demo: http://jsfiddle.net/A2tu9/191/

Solution 4 - Css

Why not simply using background-clip?

-webkit-background-clip: padding;
   -moz-background-clip: padding;
        background-clip: padding-box;

See:
http://caniuse.com/#search=background-clip<br> https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip<br> https://css-tricks.com/almanac/properties/b/background-clip

Solution 5 - Css

Way late, but I just ran into a similar issue.
My solution was pseudo elements - no additional markup, and you get to draw the border without affecting the width.
Position the pseudo element absolutely (with the main positioned relatively) and whammo.

See below, JSFiddle here.

.hello {
	position: relative;
	/* Styling not important */
	background: black;
	color: white;
	padding: 20px;
	width: 200px;
	height: 200px;
}

.hello::before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: -5px;
	right: -5px;
	bottom: 0;
	border-left: 5px solid red;
	border-right: 5px solid red;
	z-index: -1;
}

Solution 6 - Css

I shared two solutions depending on your needs:

<style type="text/css" ref="stylesheet">
  .border-inside-box {
    border: 1px solid black;
  }
  .border-inside-box-v1 {
    outline: 1px solid black; /* 'border-radius' not available */
  }
  .border-outside-box-v2 {
    box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
  }
</style>

example: https://codepen.io/danieldd/pen/gObEYKj

Solution 7 - Css

Put your div inside another div, apply the border to the outer div with n amount of padding/margin where n is the space you want between them.

Content Type	Original Author	Original Content on Stackoverflow
Question	user1083320	View Question on Stackoverflow
Solution 1 - Css	Bear In Hat	View Answer on Stackoverflow
Solution 2 - Css	Benjaroo	View Answer on Stackoverflow
Solution 3 - Css	dfsq	View Answer on Stackoverflow
Solution 4 - Css	K-Gun	View Answer on Stackoverflow
Solution 5 - Css	chrisdhanaraj	View Answer on Stackoverflow
Solution 6 - Css	Daniel Delgado	View Answer on Stackoverflow
Solution 7 - Css	IsisCode	View Answer on Stackoverflow