How to create a inner border for a box in html

Question

How to Create a inner border for a box in html   See this picture

User · Answer

x000D   x000D   blackBox   x000D      width  100   x000D      height  200px  x000D      background-color   000  x000D      position  relative  x000D      color  cyan  x000D      padding  20px  x000D      box-sizing  border-box  x000D    x000D   x000D   blackBox  before   x000D   position  absolute  x000D      border  1px dotted  fff  x000D      left  10px  x000D      right  10px  x000D      top  10px  x000D      bottom  10px  x000D      content      x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  blackBox  gt Created an inner border box   lt br gt  Working fine all major browsers  lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Please have a look    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt       lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt       lt title gt Untitled Document lt  title gt       lt style gt       box  width 500px  height 200px  background  000  border 2px solid  ccc            inner-border               border  20px solid black              box-shadow  inset 0px 0px 0px 10px red              box-sizing  border-box     Include padding and border in element s width and height                         CSS3 solution only for rectangular shape             inner-outline               outline  10px solid red              outline-offset  -30px                 lt  style gt       lt  head gt        lt body gt       lt div class  box inner-border inner-outline  gt  lt  div gt       lt  body gt       lt  html gt

User · Answer

Use dashed border style for outline  Draw background-color with  before or  after pseudo element    Note  This method will allow you to have maximum browser support   Output Image      x000D   x000D     box-sizing  border-box   x000D   x000D   box   x000D    border  1px dashed  fff  x000D    position  relative  x000D    height  160px  x000D    width  350px  x000D    margin  20px  x000D    x000D   x000D   box before   x000D    position  absolute  x000D    background  black  x000D    content      x000D    bottom  -10px  x000D    right  -10px  x000D    left  -10px  x000D    top  -10px  x000D    z-index  -1  x000D    x000D   lt div class  box  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Html    lt div class  outerDiv  gt       lt div class  innerDiv  gt Content lt  div gt   lt  div gt    CSS     outerDiv      background   000      padding  10px        innerDiv       border  2px dashed  fff       min-height  200px    adding min-height as there is no content inside

User · Answer

IE doesn t support outline-offset so another solution would be to create 2 div tags  one nested into the other one  The inner one would have a border and be slightly smaller than the container    x000D   x000D   container   x000D    position  relative  x000D    overflow  hidden  x000D    width  400px  x000D    height  100px  x000D    background   000000  x000D    padding  10px  x000D    x000D   inner   x000D    position  relative  x000D    overflow  hidden  x000D    width  100   x000D    height  100   x000D    background   000000  x000D    border  1px dashed  ffffff  x000D    x000D   lt div class  container  gt  x000D     lt div class  inner  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Take a look at this   we can simply do this with outline-offset property  Output image look like     x000D   x000D   black box   x000D      width 500px  x000D      height 200px  x000D      background  000  x000D      float left  x000D      border 2px solid  000  x000D      outline  1px dashed  fff  x000D      outline-offset  -10px  x000D    x000D   lt div class  black box  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You may also use box-shadow and add transparency to that dashed border via background-clip to let you see body background   example   x000D   x000D  h1   x000D    text-align  center  x000D    margin  auto  x000D    box-shadow  0 0 0 5px  1761A2  x000D    border  dashed 3px  1761A2  x000D    background  linear-gradient  1761A2   1761A2  no-repeat  x000D    background-clip  border-box  x000D    font-size  2 5em  x000D    text-shadow  0 0 2px white  0 0 2px white  0 0 2px white  0 0 2px white  0 0 2px white  x000D    font-size  2 5em  x000D    min-width  12em  x000D    x000D  body   x000D    background  linear-gradient to bottom left  yellow  gray  tomato  purple  lime  yellow  gray  tomato  purple  lime  yellow  gray  tomato  purple  lime   x000D    height  100vh  x000D    margin  0  x000D    display  flex  x000D    x000D    first-line   x000D    color  white  x000D    text-transform  uppercase  x000D    font-size  0 7em  x000D    text-shadow  0 0 x000D    x000D  code   x000D    color  tomato  x000D    text-transform  uppercase  x000D    text-shadow  0 0  x000D    x000D  em   x000D    mix-blend-mode  screen  x000D    text-shadow  0 0 2px white  0 0 2px white  0 0 2px white  0 0 2px white  0 0 2px white x000D    x000D   lt h1 gt transparent dashed border lt br  gt  x000D     lt em gt with lt  em gt   lt code gt background-clip lt  code gt  x000D   lt  h1 gt  x000D   x000D   x000D    Pen to play with  render in firefox

[html] How to create a inner border for a box in html?

Examples related to html

Examples related to css

Examples related to border

Examples related to css-shapes