Make a very thin white line in CSS

Question

This may sound quite silly, but I have no idea how to make a thin line smaller then 1px.

What I am looking for is something like this:

https://www.simple.com/

If you do:

    .nav-bar {
       border-bottom: 1px;
    }

It's almost twice, if not three times as thick. As you are also probably aware, doing 1em would just round up to 1px.

Anyone have any ideas?

Answer 1

.nav-bar {
  border-bottom: 1px solid rgba(255,255,255,.25);
}

This generates a white 1px line that has an opacity of 25%. This is about the same as your example page. Transparency is the key here; the line can’t be thinner than 1px.

Snippet:

body {
  background: black;
}

.nav-bar {
  width:100%;
  height:100px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

<div class="nav-bar">