Provide way to specify size to border

[subrayamallya]

Currently we have border, border-primary, border-success etc all of them seem to only have a 1 pixel thick border with no ability to make the border thicker/wider. The border with 1 pixel gets lost when you have padding, margins or shadow.

Would it be possible to add a border-size attribute?

We can either have

• pixel count specified like border-1, border-2, border-3 (a finite list of choices) OR
• named sizes like we have in shadow such as border-none border border-sm, border-lg

[JagadishSivakumar]

Hi @subrayamallya
Having a border-size attribute will be awesome and very handy.
But the actual problem with such design attributes is border-1, border-2 .. will be very distinct and the developer will not be able to use intermediate width for the border element.

border-width:3px 

[subrayamallya]

Hi @subrayamallya
Having a border-size attribute will be awesome and very handy.
But the actual problem with such design attributes is border-1, border-2 .. will be very distinct and the developer will not be able to use intermediate width for the border element.

border-width:3px 

Fair enough. I was relying on the smart guys in Bootstrap team to make a better call on this than my rudimentary suggestion :-)

[mdo]

Having a Sass map that provides a few utilities to scale the border quickly could be nice. Suggestions on values to support?

[sio-iago]

Any chance I can contribute to this? I have an idea.

We can have a mixin on utilities, so it's available to all developers:

@mixin make-border-width($width: 1) {
    border-width: $width;
}

With the mixin we can define some default border classes:

border-1
make-border-width(1px)

border-2
make-border-width(2px)

border-3
make-border-width(4px)

border-4
make-border-width(6px)

border-5
make-border-width(8px)

[subrayamallya]

Can we do something similar to what you have done for Sass map $display-font-sizes and have the Sass map
$border-width-sizes

$border-width-sizes: (
1: 1rem,
2: 1.5rem,
3: 2rem,
4: 2.5rem,
5: 3rem,
6: 3.5rem
);

You can even have the size in reverse order if you want to keep the order consistent with $display-font-sizes

[MauricioHernanCabrera]

I can do a border-width utility
For example

.border-width-1 {
   border-width: 1px;
}

.border-width-2 {
   border-width: 2px;
}

.border-width-3 {
   border-width: 3px;
}

...