css border length

, etc., or pseudo-elements. I'm frontend developer from Budapest, Hungary. The border-bottom-width property sets the width of an element's bottom border.. property. Open source and radically transparent. CSS is great, it's simple and it's really easy to understand it. #box { height: 70px ; width: 70px ; position: relative; border-bottom: 2px solid #0004ff ; background: #cccaca ; } #borderLeft { border-left: 2px solid #0004ff ; position: absolute; top: 50% ; bottom: 0 ; } Let’s see the result of our code. Definition and Usage. Note: Always declare the border-style or the border-bottom-style property before the border-bottom-width property. An element must have borders before you can set the width. border-width: Specifies the width of the border. Next, we’re going to demonstrate another example, where we limit the border length of four different elements. If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: W3Schools is optimized for learning and training. Generate Functional CSS with ease. The border-width property sets the width of an element's four borders. .title {border-bottom-length: 50px; border-bottom-color: #efefef; border-bottom-width: 1px; border-bottom-style: solid; font-size: 24px; margin: 0 0 10px; padding: 0 0 10px;} As for me this solution looks much more cleaner. An element must have borders before you can change the width. And unfortunately it's impossible to solve this with border which, in my opinion, could be much easier and better. Accept. The numbers in the table specify the first browser version that fully supports the property. I definitely like your idea! Note: Always declare the border-style property before the border-width The problem with hr that it can work good horizontally but not vertically.. And border can work in both directions. Set the position to “absolute” and add the top and bottom properties. Vue.js, CSS Modules, Functional CSS. This property can or pseudo elements: As you can see this is not the worst solution, but not the best. Just follow the steps below. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. To limit the length of the top, bottom, right, and left borders, we use the border-top, border-bottom, border-right, and border-left properties, respectively. Built on Forem — the open source software that powers DEV and other inclusive communities. Absolutely agree with border-origin, which can accept values like "start", "center/middle", "end".

An element must have borders before you can set the width. with the [transform: rotate()] and [position: absolute], you can push the

---

tag(s) to any position of the parent element with a [position: relative]. We use cookies to improve user experience, and analyze website traffic. This idea would probably need to introduce some kind of border-origin property for those who do not want their custom-length border to start in the center. I agree. Default value is the color of the text: initial: Sets this property to its default value. Which then leads me to think that a border pretty much defines an area so I think this should not be handled by a border but perhaps a good old

---

. Sometimes, you may have difficulty when you need to make the border shorter than its parent element.

The solution is quite easy. A constructive and inclusive social network. I think many of us have faced the case when the border had to be much shorter than it's parent element itself. To overcome this, use CSS properties and HTML elements. Style the