4

I want to show border 1.5px, I can't able to see. It's showing same as 1px. I don't want 2 px, bcz it's much broad for me

.newTitle {
  border-bottom: 1.5px solid orange;
}
<p class="newTitle">stack Overflow</p>
  • 8
    Well, as long as your monitor can't illuminate *half* a pixel, I think you might be out of luck there... – domsson Apr 05 '17 at 12:36
  • Try a double border instead of a solid one? It really depends on the color. 2px light grey won't look as weird as 2px red for example. – Ravenous Apr 05 '17 at 12:41
  • (To be fair, 1px in CSS doesn't necessarily equal 1 physical pixel, but often enough, this is actually the case) – domsson Apr 05 '17 at 12:45
  • [This](http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/) article shows a neat trick to fake the half pixel, which browsers mostly just ignore. – Douwe de Haan Apr 05 '17 at 12:47
  • you'll have to find a compromise since pixels cannot be broken in pieces , a shadow might give the illusion to thicken it a bit : box-shadow: 0 1px 1px -1px orange demo : https://jsfiddle.net/phugj8d2/ – G-Cyrillus Apr 05 '17 at 12:47

4 Answers4

6

comment turned into answer:

you'll have to find a compromise since pixels cannot be broken in pieces , a shadow might give the illusion to thicken it a bit :

box-shadow: 0 1px 1px -1px orange

demo

.newTitle {
  border-bottom: 1.5px solid orange;
}

.bis {
  box-shadow: 0 1px 1px -1px orange
}

.ter {
  border-bottom: 2px solid orange;
}
<p class="newTitle">stack Overflow  (1px)</p>
<p class="newTitle bis">stack Overflow (1px + shadow)</p>
<p class="newTitle ter">stack Overflow (2px)</p>
G-Cyrillus
  • 94,270
  • 13
  • 95
  • 118
0

Considering the definition of a pixel this doesnt surprise me. Maybe an added shadow feels better than the 2 px border to you.

Peter-Paul
  • 118
  • 5
-1

You can try it in EM. Assuming that EM is 16px, 1.5px = 0.09375em Good luck!

Pablo Mariante
  • 143
  • 1
  • 7
-1

#percentage {
    width: 200px;
    color: white;
}

#percentage .first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#percentage .second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#percentage .third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

#pixels {
    color: white;
}

#pixels .first {
    width: 50px;
    height: 20px;
    background-color: red;
}

#pixels .second {
    width: 50.5px;
    height: 20px;
    background-color:green;
}

#pixels .third {
    width: 50.6px;
    height: 20px;
    background-color:blue;
}

#pixels .fourth {
    width: 51px;
    height: 20px;
    background-color:red;
}
<div id="percentage">
    <div class="first">50%=100px</div>
    <div class="second">50.5%=101px</div>
    <div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>

in browsers the values are truncated, so 1, 1.5 all show the same width..Please refere Please refere https://stackoverflow.com/a/4309051/5557620

Community
  • 1
  • 1
Nisha Salim
  • 610
  • 5
  • 13