CODEWITHSUNDEEP
htmlcssborder
Tom Lehman
Tom Lehman

Reputation: 89193

Partial width borders

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

enter image description here

Do I have to use a separate HTML element with a different width? Or can I achieve this entirely via CSS.

Upvotes: 6

Views: 5443

Answers (2)

igneosaur
igneosaur

Reputation: 3346

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...

Upvotes: 0

John Green
John Green

Reputation: 13435

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

Upvotes: 18

Related Questions