Border length smaller than div width

Question

I have following code   div      width 200px     border-bottom 1px solid magenta     height 50px         DEMO  The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width

User · Answer

I have case to have some bottom border between pictures in div container and the best one line code was -  border-bottom-style  inset

User · Answer

The border is given the whole html element  If you want half bottom border  you can wrap it with some other identifiable block like span   HTML code    lt div gt   lt span gt content here  lt  span gt  lt  div gt    CSS as below    div      width 200px      height 50px            span          width 100px          border-bottom 1px solid magenta

User · Answer

I just accomplished the opposite of this using  after and   after because I needed to make my bottom border exactly 1 3rem wider   My element got super deformed when I used  before and  after at the same time because the elements are horizontally aligned with display  flex  flex-direction  row and align-items  center   You could use this for making something wider or narrower  or probably any mathematical dimension mods   a nav link-active     color   e1-red    margin-top  3 7rem    a nav link-active visited     color   e1-red    a nav link-active after     content        margin-top  3 3rem          margin and height should   height  0 4rem              add up to active link margin   background   e1-red    margin-left  - nav-spacer-margin    display  block    a nav link-active  after     content        margin-top  3 3rem          margin and height should   height  0 4rem              add up to active link margin   background   e1-red    margin-right  - nav-spacer-margin    display  block      Sorry  this is SCSS  just multiply the numbers by 10 and change the variables with some normal values

User · Answer

You cannot have a different sized border than the div itself   the solution would be to just add another div under neath  centered or absolute positioned  with the desired 1pixel border and only 1pixel in height   http   jsfiddle net WuZat 3   I left the original border in so you can see the width  and have two examples -- one with 100 width  and the other with 100 width centered  Delete the one you dont wish to use

User · Answer

Another way to do this  in modern browsers  is with a negative spread box-shadow   Check out this updated fiddle  http   jsfiddle net WuZat 290   box-shadow  0px 24px 3px -24px magenta    I think the safest and most compatible way is the accepted answer above  though  Just thought I d share another technique

User · Answer

You can use a linear gradient    x000D   x000D  div   x000D      width 100px  x000D      height 50px  x000D      display block  x000D      background-image  linear-gradient to right   000 1px  rgba 255 255 255 0  1px   linear-gradient to left   000 0 1rem  rgba 255 255 255 0  1px   x000D   background-position  bottom  x000D   background-size  100  25px  x000D   background-repeat  no-repeat  x000D      border-bottom  1px solid  000  x000D      border-top  1px solid red  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

div      font-size  25px      line-height  27px      display inline-block      width 200px      text-align center     div  after       background   f1991b none repeat scroll 0 0      content          display  block      height  3px      margin-top  15px      width  100px      margin auto

User · Answer

Late to the party but for anyone who wants to make 2 borders  on the bottom and right in my case  you can use the technique in the accepted answer and add an  after psuedo-element for the second line then just change the properties like so  http   jsfiddle net oeaL9fsm   div     width 500px    height 500px       position  relative    z-index   1    div before     content         position  absolute    left      25     bottom    0    height    1px    width     50     border-bottom 1px solid magenta    div after     content         position  absolute    right      0    bottom    25     height    50     width     1px    border-right 1px solid magenta

User · Answer

I did something like this in my project  I would like to share it here  You can add another div as a child and give it a border with small width and place it left  centre or right with usual CSS  HTML code        lt div gt          content           lt div class   ac-brdr  gt  lt  div gt       lt  div gt    CSS as below       active       color  magneta          active  ac-brdr           width  20px          margin  0 auto          border-bottom  1px solid magneta

User · Answer

You can use pseudoelements  E g    x000D   x000D  div   x000D    width     200px  x000D    height    50px     x000D    position  relative  x000D    z-index   1  x000D    background   eee  x000D    x000D   x000D  div before   x000D    content       x000D    position  absolute  x000D    left      0  x000D    bottom    0  x000D    height    1px  x000D    width     50       or 100px    x000D    border-bottom 1px solid magenta  x000D    x000D   lt div gt Item 1 lt  div gt  x000D   lt div gt Item 2 lt  div gt  x000D   x000D   x000D    No need to use extra markup for presentational purpose   after is also supported from IE8    edit    if you need a right-aligned border  just change left  0 with right  0  if you need a center-aligned border just simply set left  50px

User · Answer

This will help   http   www w3schools com tags att hr width asp   lt hr width  50   gt    This creates a horizontal line with a width of 50   you would need to create modify the class if you would like to edit the style

User · Answer

I added line under under h3 tag like this    lt h3 class  home title  gt Your title here lt  h3 gt    home title      display block     home title after       display block      clear both      content           position  relative      left      0      bottom    0      max-width 250px      height    1px      width     50       or 100px        border-bottom 1px solid  e2000f      margin 0 auto      padding 4px 0px

[html] Border length smaller than div width?

Examples related to html

Examples related to css