HTML

<div id="d1"> <p>need this:</p> <hr /> </div> <div id="d2"> <p>have this:<br><small>(lines are not smooth)</small></p> <hr /> </div> <div id="d3"> <p>and this:<br><small>(smooth lines, but too big)</small></p> <hr /> </div> <div id="d4"> <p>how to recreate the pattern seen in the 1st box with css only?</p> </div>