Partial width borders

How can I produce borders that don't stretch the whole width of a given box? E.g.:

Do I have to use a separate HTML element wi开发者_Python百科th a different width? Or can I achieve this entirely via CSS.

You can always use a CSS :after statement:

<style>
div.hr-like:after {
    height:1px;
    background:#333;
    width:25%;
    display:block;
    margin:0px auto;
    content:""
}
</style>

<div class="hr-like">
    foo
</div>

Added: Here's an example at jsfiddle

You could assign a background image to each partial div and place it along the bottom in the middle. Then the separator can be what you want and how long you want, like that pencil line you got there.

#content {
    background: transparent url('http://placekitten.com/200/10') no-repeat bottom center;
}

Sorry for the kittens...