'Defining a border width in PX vs EM on a responsive design

My entire stylesheet is all done using em instead of px. The entire theme is responsive.

The only thing that I have seen I would like to change to px is with a class that adds a border:

.border {
   border-width: 0.1em;
   border-style: solid;
}

The 0.1em seems a little thick in most places. I would like to change this to px:

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

I know I am probably being overly picky here, but is there any reason I shouldn't use px when defining a border width? If so, is there any way I can get that 0.1em down a little smaller to look more like 1px?

htmlcss


Solution 1:[1]

Instead of defining it in em, which you have said you're not happy with, define it in px but change the value to 2px or 3px, etc., as the site changes via media queries. Then you have definite control. 

@media screen and (min-width:30em) { .border {border:1px;} }
@media screen and (min-width:50em) { .border {border:2px;} }

The disadvantage is if you are wanting small increments in the screen size and your CSS becomes book length. Then you are just being overly picky.

Solution 2:[2]

Don't use px if you want your border width to be responsive. Px is a fixed-size unit and will be constant despite any other responsive changes. Thus, you run the risk of having tiny or large border widths relative to the rest of the page.

Did you test how the 1px looks when your font-size (em scales with font-size) increases or decreases?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rob
Solution 2 Ayub

Related Questions