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:

http://jsfiddle.net/qc22p/

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

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

Pull out data related to my apps from Android Play Store and iOS App Store -

How can I fetch data from a web server in an android application? -