Provides a border for the element, with a width equal to 1 local device pixel, which can be very sharp and clear.
HTML CODE:
<div class="hairline-border">
text with a thin border around it.
</div>
CSS CODE:
.hairline-border {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.hairline-border {
box-shadow: 0 0 0 0.5px;
}
}
@media (min-resolution: 3dppx) {
.hairline-border {
box-shadow: 0 0 0 0.33333333px;
}
}
@media (min-resolution: 4dppx) {
.hairline-border {
box-shadow: 0 0 0 0.25px;
}
}
Description
- box-shadow , when using only extensions, add a fake border that can use subpixels*.
- Use @media (min-resolution: ...) To check the device pixel ratio ( 1dppx equal to 96 DPI), set box-shadow the distribution to 1 / dppx. .
Post your comments / questions
Recent Article
- How to use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
- How to calculate days difference between two dates in c#?
- Changing date format in jQuery ui datepicker
Related Article