Hope that makes sense!You can change the width if your main container which is ".services" to be around 35% so that the line is as long as the parents width.

Once you’ve chosen a border style, you can also use the “Borders” button on the “Design” tab and select an option from the drop-down menu to apply borders to specific parts of the table or “All Borders… We love hearing from this community of creative individuals.If you ever need any assistance with CSS, HTML, PHP, jQuery or WordPress just Check out some of our other helpful web design posts!

Hi Gabriel Ward, First put everything in a div with a class called container like this,

An element must have borders before you can change the width. Posting to the forum is only allowed for members with active accounts.

The border will always be the same width and height as the element it surrounds. My first thought was maybe CSS would let you establish a width for border-bottom… No such luck. Since you are displaying the bottom border for your .service div, it will always be as wide as the div. This property can have from one to four values. */ display: block; /* This will put the pseudo element on its own line. You just want it to be under a bit of it.

Done.Let’s say you are trying to add a border-bottom to an element with the class of “Please leave comments with any questions or concerns. See border-bottom-style. Definition and Usage.
The border-bottom-width property sets the width of an element's bottom border. border-bottom-style; border-bottom-width; Syntax border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values See border-bottom-width.

Let’s say you are trying to add a border-bottom to an element with the class of “page-title“.Your code would look like this..page-title:after { content: ""; /* This is necessary for the pseudo element to work. If you want the orange line in your screenshot to be shorter without affecting the text above it, you can create another div below .service with a height of 0px, set the width to the desired value, and display the bottom border.

Note: Always declare the border-style or the border-bottom-style property before the border-bottom-width property. If you are like me you have ran into this issue many times. Click the cursor on any cell borders to which you want to apply the chosen border style.

Put another wayI’d like the green border to run say 50% along the edge of the div centrally position if that makes sense rather than right along the total edge. How do i shorten the length of the border so it doesn't go across the entire page page? The only way to make it shorter is to change the width of the div itself. You can go in to the HTML and add another element below the element you want to have the border-bottom and give it a background that is the color you want the border to be and then set the width and height, which is what I have done for years.There isn’t a way to declare the length of a border, but I found a pretty slick work around using nothing but CSS.Instead of adding a border to the element you are trying to effect add a pseudo element of :after and give it a border-bottom and set the width. Examples: border-width: thin medium thick 10px; top border is thin; right border is medium

Umar A 4,041 Points Umar A . How do I change the bottom border length and make it smaller than my current
width?

Thanks.


Umar A 4,041 Points November 25, 2014 9:17am. Like so:Does this answer your question? Since you are displaying the bottom border for your .service div, it will always be as wide as the div. The border-width property sets the width of an element's four borders.

You want to add a border to the bottom of an element but you don’t want it to be under 100% of the element. The only way to make it shorter is to change the width of the div itself. */ margin: 0 auto; /* This will center the border.

12 Answers.

"border-bottom: 2px solid orange; adds a nice border which spans across the length (or rather width) of my
paragraph like it is show here: As far as I understand, I have to use pseudo-class to alter the length of my bottom-border and make it shorter?Hi Aleksandrs, Here is my html in which I would like to add a bottom-border:The last line of code i.e.

Or are you trying to do this without changing your main containers width?I will go with Jonathans advice and add an additional
below my .services and style it accordingly.