html - <hr> horizontal line of 1px is not perfectly straight -
i'm trying test simple little border style made using <hr> html tags. consists of vertical , horizontal lines. vertical lines display horizontal lines have tiny strange curve @ end, i'm not sure why it's happening. know problem?
here code:
<div style="width:680px; height:540px; position: relative;"> <hr style="height: 23%; width: 0.01em; position: absolute; left: 35.3%; top: 5.5%;"> <hr style="height: 18%; width: 0.01em; position: absolute; left: 35.3%; top: 40.5%;"> <hr style="height: 20%; width: 0.01em; position: absolute; left: 35.3%; top: 70.5%;"> <hr style="height: 23%; width: 0.01em; position: absolute; left: 65.9%; top: 5.5%;"> <hr style="height: 18%; width: 0.01em; position: absolute; left: 65.9%; top: 40.5%;"> <hr style="height: 20%; width: 0.01em; position: absolute; left: 65.9%; top: 70.5%;"> <hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 34.5%;"> <hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 34.5%;"> <hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 34.5%;"> <hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 64.5%;"> <hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 64.5%;"> <hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 64.5%;"> </div> here jsfiddle link:
so do. suspect may css "border style" or intended render 3d effect... grooved, ridged or somesuch.
see: http://www.w3schools.com/cssref/pr_border-style.asp
yep, adding border-style:solid; fixed it.
you may able find prettier border-style.
Comments
Post a Comment