Border bottom как задать длину

Изменить длину border-bottom

Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?Чет.

Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px dotted black; — будут.

Двойной border-bottom
Создаю, 2 тему, извиняюсь, как сделать чтобы border был, на блоке div, и под текстом, к примеру.

border-bottom не работает
Здравствуйте! У меня почему-то не хочет отображать border-bottom, я его к чему хочешь применял.

css- length of border bottom

enter image description here

But I need to resize the length of the border like this:

enter image description here

Any ideas on how I can do this? Thanks

5 Answers 5

This is how I would do it:

It is better to use text-decoration in your situation Like this

And HTML like this

If you can use the ::after pseudo-element, you can give styles to that one.

Or, if you can’t use ::after , maybe something like this.

(This one is more fussy though; the position of the underline depends on the font size and you may have to fiddle around a bit to get it in the right position.)

There may be more than one way. I think;

Here is my solution: Try to test this in the fiddle

The Overflow Blog

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How to set the width of the bottom border in CSS ?

In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin…etc.

Approach 1:

We will use inline CSS inside the tags.
We will use border-color,border-style property to define the border clearly.
We can give the width of the bottom border using the border-bottom-widthproperty.

Example: In this example, we are using the above-explained approach.

border-bottom

Shorthand property that defines the border-width, border-style and border-color of an element’s bottom border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the bottom border — border-bottom-width, border-bottom-style and border-bottom-color.

Overview table

Syntax

border-bottom: border-width border-style color
border-bottom: inherit

Values

border-width : This takes a numeric value with any of the standard length units.
border-style : This takes any of the range of style values available to the border-style property, which includes none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset . For more details about each, see the border-style page.
color : This can take any valid CSS color as its value.

Examples

A simple example showing multiple <div> s, identical in style except that they have different border-bottom properties applied to them.

An example showing the use of border-bottom property with the hover effect…It gives a beautiful result

Usage

border-bottom can be used as a divider between vertically laid out items, such as a vertical navigation menu, or table cells.

Notes

Computed values

For style values, the computed value is as specified. For width values, the computed value is the absolute pixel value, or 0 if the value is set to none or hidden . For color values, the computed value is the equivalent RGB value, or the equivalent RGBA value for translucent colors.