Is border length less than div width?

Question

I have the following code

div { width:200px; border-bottom:1px solid magenta; height:50px; } 

Demo

The width of the div is 200px, so border-bottom is also 200px, but what should I do if I want border-bottom to be only 100px without changing the width of the div?

Answer 1

You can use pseudo-elements. For example.

 div { width : 200px; height : 50px; position: relative; z-index : 1; background: #eee; } div:before { content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 50%; /* or 100px */ border-bottom:1px solid magenta; } 

 <div>Item 1</div> <div>Item 2</div> 

No need to use extra markup for presentation purpose .: after IE8 is also supported.

edit:

if you need a right-aligned border just change left: 0 to right: 0

if you need a center aligned frame, just set left: 50px;

Answer 2

Another way to do this (in modern browsers) is with a negative shadow with an extension. Check out the updated script: 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. Just thought that I would share another technique.

Answer 3

You can use a linear gradient:

 div { width:100px; height:50px; display:block; 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); background-position: bottom; background-size: 100% 25px; background-repeat: no-repeat; border-bottom: 1px solid #000; border-top: 1px solid red; } 

 <div></div> 

Answer 4

You cannot have a border of a different size than the div itself.

the solution would be to simply add another div under neutral, centered or absolute positioning with the desired border of 1 pixel and only 1 pixel in height.

http://jsfiddle.net/WuZat/3/

I left the original frame so you can see the width, and have two examples: one with a width of 100, and the other with 100 centering in width. Remove the one you do not want to use.

Answer 5

I added a line under the h3 tag similar to this

 <h3 class="home_title">Your title here</h3> .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; } 

Answer 6

The border gets the whole html element. If you want to get half the lower bound, you can wrap it with some other identifiable block, such as span.

HTML code:

 <div> <span>content here </span></div> 

CSS as below:

  div{ width:200px; height:50px; } span{ width:100px; border-bottom:1px solid magenta; } 

Answer 7

I just did the opposite of this using :after and ::after , because I needed to make the 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 aligned horizontally with display: flex , flex-direction: row and align-items: center .

You can use this to create something broader or narrower, or perhaps any motive for the mathematical dimension:

 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.

Answer 8

  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; } 

Answer 9

This will help:

http://www.w3schools.com/tags/att_hr_width.asp

 <hr width="50%"> 

This creates a horizontal line with a width of 50%, you will need to create / change the class if you want to edit the style.

Answer 10

Late to the party, but for those who want to make 2 borders (bottom and right in my case), you can use the technique in the accepted answer and add: after psuedo-element for the second line, then just change the properties: 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; }