DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Eduard Pochtar πŸ‘¨β€πŸ’»
Eduard Pochtar πŸ‘¨β€πŸ’»

Posted on

border-length CSS Border Length

border

CSS is great, it's simple and it's really easy to understand it. Of course despite it's awesome, it still has some missing features like for example scope. But in this small article I would like to propose to solve a little bit smaller problem.

I think many of us have faced the case when the border had to be much shorter than it's parent element itself. And unfortunately it's impossible to solve this with border which, in my opinion, could be much easier and better. Currently the only way to solve this just by using some other help elements (hr, span, div, etc.) or pseudo elements:

.title {
    font-size: 24px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    position: relative;
}

.title::after {
    background-color: #efefef; 
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%,0);
    width: 50px;
}
Enter fullscreen mode Exit fullscreen mode

As you can see this is not the worst solution, but not the best.

I think for this case there can be a better solution - border-length.
What if it would be possible to do like so:

.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;
}
Enter fullscreen mode Exit fullscreen mode

As for me this solution looks much more cleaner. And of course shorthands...

What do you think?

Top comments (6)

Collapse
 
nmaxcom profile image
Carles Alcolea

You gave me hope when I read border-bottom-length. Now... Now I feel empty.

Collapse
 
marvinkweyu profile image
Marvin

You too? lol. Same boat

Collapse
 
ikbensiep profile image
Sibrand Hoekstra • Edited on

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.

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 <hr />

Collapse
 
iamfrntdv profile image
Eduard Pochtar πŸ‘¨β€πŸ’» Author • Edited on

Absolutely agree with border-origin, which can accept values like "start", "center/middle", "end".

The problem with hr that it can work good horizontally but not vertically.. And border can work in both directions.

Collapse
 
danaustinweb profile image
Daniel Austin • Edited on

with the [transform: rotate()] and [position: absolute], you can push the <hr /> tag(s) to any position of the parent element with a [position: relative].

So which ever is sutaible for the user, either your second method or using the <hr />, all is still save...

Collapse
 
grepliz profile image
Liz Lam

I agree. It's unfortunate we are unable to control border lengths. I definitely like your idea!

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›