Oli Movie R

Sometimes we need to realize half pixel border for beautiful UI and it's not as simple as you think.

Problem

border-width: 0.5px works in Safari. But it doesn't work in Chrome.

HTML

<div class="content">Content</div>

CSS

.content {
  border-bottom: 0.5px solid lightGray
}

Result in Chrome

Content

Solution

We need to do something special.

HTML

<div class="container">
    <div>Content</div>
    <div class="border"></div>
</div>

CSS

.container {
    position: relative;
}
.border{
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 1px solid #333;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

Result

Content

Let's analysis the CSS codes. At first we make the border div absolute and twice as big as the content div. Then we set 1px border for the border div. At last we scale the border div to half. The border is scaled at the same time. So its width will be 0.5px.

Actually the result we see is composed of two parts: content from content div and border from border div. They together produce an illusion that the content has a 0.5px border.

Cheer! We realize our goal.

If you want to learn more about the problem please refer this post. BTW it's Chinese.

Realize Half Pixel Border in Chrome

Problem

Solution