outline on only one border

Question

How to apply an inset border into an HTML element  but just only on one side of it   Until now  I ve been using an image to do that  GIF PNG  that I would then use as a background and stretch it  repeat-x  and position a little off from the top of my block  Recently  I discovered the outline CSS property  which is great  But seems to circle the whole block    Is it possibly to use this outline property to do it on just only one border  Also  if not  do you have any CSS trick that could replace the background image   so that I could personalize the colors of the outline later using CSS  etc   Thanks in advance   Here s an image of what am trying to achieve  http   exiledesigns com stack jpg

User · Answer

You can use box-shadow to create an outline on one side  Like outline  box-shadow does not change the size of the box model   This puts a line on top   box-shadow  0 -1px 0  000    I made a jsFiddle where you can check it out in action     INSET  For an inset border  use the inset keyword  This puts an inset line on top   box-shadow  0 1px 0  000 inset    Multiple lines can be added using comma-separated statements  This puts an inset line on the top and the left   box-shadow  0 1px 0  000 inset              1px 0 0  000 inset    For more details on how box-shadow works  check out the MDN page

User · Answer

I know this is old  But yeah  I prefer much shorter solution  than Giona answer   contenteditable        border-bottom  1px solid transparent       amp  focus  outline  none  border-bottom  1px dashed  000

User · Answer

only one side outline wont work you can use the border-left right top bottom  if i an getting properly your comment

User · Answer

I like to give my input field a border  remove the outline on focus  and  outline  the border instead   input     border  1px solid grey      amp  focus       outline  none      border-left  1px solid violet           You can also do it with a transparent border   input     border  1px solid transparent      amp  focus       outline  none      border-left  1px solid violet

User · Answer

Outline indeed does apply to the whole element   Now that I see your image  here s how to achieve it    x000D   x000D   element   x000D    padding  5px 0  x000D    background   CCC  x000D    x000D   element before   x000D    content    a0   x000D    display  block  x000D    padding  2px 0  x000D    line-height  1px  x000D    border-top  1px dashed  000   x000D    x000D   element p   x000D    padding  0 10px  x000D    x000D   lt div class  element  gt  x000D     lt p gt Some content comes here    lt  p gt  x000D   lt  div gt  x000D   x000D   x000D     Or see external demo    All sizes and colors are just placeholders  you can change it to match the exact desired result   Important note   element must have display block   default for a div  for this to work  If it s not the case  please provide your full code  so that i can elaborate a specific answer

User · Answer

Try with Shadow  Like border     Border   border-bottom  5px solid  fff  box-shadow  0 5px 0  ffbf0e

User · Answer

The great thing about HTML CSS is that there s usually more than one way to achieve the same effect  Here s another solution that does what you want    lt nav id  menu1  gt       lt ul gt           lt li gt  lt a href     gt Menu Link 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt Menu Link 2 lt  a gt  lt  li gt       lt  ul gt   lt  nav gt   nav       background  666      margin 1em      padding  5em 0    nav ul       border-top 1px dashed  fff      list-style none      padding  5em    nav ul li       display inline-block    nav ul li a       color  fff      http   jsfiddle net 10basetom uCX3G 1

[html] outline on only one border

Examples related to html

Examples related to css