0.5px css,关于CSS实现border的0.5px设置？

网上看到的代码，有些不理解的地方：

.custom-border{

width:200px;

margin:10px auto;

height:100px;

border:1px solid #333;

background-color:#eee;

padding:10px;

}

.scale-border{

margin:10px auto;

height:100px;

position:relative;

padding:10px;

width: 200px;

}

.border{

-webkit-transform:scale(0.5);

transform:scale(0.5);

position:absolute;

border:1px solid #333;

top:-50%;

right:-50%;

bottom:-50%;

left:-50%;

border-radius: 10px;

background-color:#eee;

}

.content{

position:relative;

z-index:2;

}

请问在这里CSS代码中的

top:-50%;

right:-50%;

bottom:-50%;

left:-50%;

是什么意思？实现这个0.5px的边框的原理是什么？

btw，transform:scale是不是在项目中挺少用到的？百度了好久关于scale 的详细用法甚少。。