Question

I’m trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something?

HTML

<div class="divider"></div>

CSS

.divider {
    background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
    height:30px;
    padding-bottom: 10px;
    width: 100%;
    margin: 20px auto;
    float: left;
    border-bottom: 2px dotted #b38b0d;
    }

Answer 1

no. But you can create another element that have the border and move it within the .divider

html

<div class="divider">
    <div class="inner"></div>
</div>

css

.inner {
 margin-top:19px;
 border-bottom: 2px dotted #b38b0d;   
}

Demo: http://jsfiddle.net/5xMG7/