CSS Outside Border

Question

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

User · Answer

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

User · Answer

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    x000D   x000D   lt div style  height  100px  width  100px  background  black  color  white  outline  thick solid  00ff00  gt SOME TEXT HERE lt  div gt  x000D   x000D   lt div style  height  100px  width  100px  background  black  color  white  border-left  thick solid  00ff00  gt SOME TEXT HERE lt  div gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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    lt head gt      lt style type  text css  ref  stylesheet  gt        div           width 22px          height 22px          outline 1px solid black              lt  style gt   lt  head gt   lt div gt      outlined  lt  div gt    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

User · Answer

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

User · Answer

I shared two solutions depending on your needs      lt style type  text css  ref  stylesheet  gt     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          lt  style gt      example  https   codepen io danieldd pen gObEYKj

User · Answer

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 https   developer mozilla org en-US docs Web CSS background-clip https   css-tricks com almanac properties b background-clip

[css] CSS Outside Border

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

Examples related to css

Examples related to border