Подскажите как такое сделать на css

так а там, где вы это выдрали стили спрятаны штоле?

да спрятаны

Нужно, чтобы оно растягивалось по ширине, и центровалось по середине? Или не обязательно?

<div class="blue-line"></div>

<div class="space"><span class="bold">Or, </span> create an account</div>

<div class="blue-line"></div>

не совсем как в примере, но результат одинаков.

<style>

.hr {background:url(dot.gif) center repeat-x}

.hr .text {padding:0 10px; background:#fff}

.hr span {font-size:14px; font-weight:bold}

</style>



<div class="hr"><div class="text"><span>Or,</span> create an account</div></div>

но этот вариант с картинкой dot.gif (1x1).

По средине

С картинкой

<div class="space">

	<span class="in">

		<span class="bold">Or, </span> create an account

	</span>	

</div>

.space{

    text-align:center;

    background:#eef7fe url(line.jpg) repeat-x 0 50%; 

    height:36px;

    line-height:36px;

}

.space .in{

   background:#eef7fe;

   padding:0 10px;

}

Да проще это делается. Я бы сделал так:

<div class="block">
    <span>Тут какой-то текст</span>
</div>

Стили соответственно выглядят примерно так:

.block{background: url('line.gif') center repeat-x; text-align: center;}
.block span{background: #fff; padding: 0 15px;}

Зачем плодить столько кода? )

UPD: сори, выше то же самое ответили)

Спасибо большое

Или без картинки. Разметка как у Сашко, а стили вот:

.block {height:0; overflow:visible; border-bottom:1px solid blue; text-align:center; position:relative; margin:20px;}
.block span{background: #fff; padding: 0 15px; position:relative; top:-0.75em}

Была бы возможность, одним тегом сделать можно? fieldset