Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually?
Thank you.
Although this isn't (currently) possible in any version of IE or Edge, on the latest versions of Firefox and Chrome you can now use border width values less than 1px.
.borderTest {
box-sizing: border-box;
display: block;
margin: 0.5em;
padding: 0.5em;
width: calc( 100% - 1em );
}
.borderTest:nth-child(1){
border: 1px solid #000
}
.borderTest:nth-child(2){
border: 0.75px solid #000
}
.borderTest:nth-child(3){
border: 0.5px solid #000
}
.borderTest:nth-child(4){
border: 0.25px solid #000
}
1px
0.75px
0.5px
0.25px
This outputs the following on a UHD screen: