Allora quelli che stai realizzando sono dei titoli.
Vanno realizzati mediante il tag <hX> (nel tuo caso direi che sono <h2>).

Per poter inserire i bordi a sin e dx, e` necessaria della marcatura supplementare.
In alternativa devi usare una immagine fissa per tutti (ma vedo che non tutti sono della stessa larghezza).
[[ il codice che hai proposto non e` valido con i CSS2: una cosa del genere (ma sintassi diversa) sara` possibile con i CSS3, che pero` non sono ancora sufficientemente supportati (pero` qualche browser gia` li implementa) ]]

Io partirei con una marcatura del genere:
<h2><span class="sx">&amp;nbsp;</span>Latest News<span class="dx">&amp;nbsp;</span></h2>

CSS:
codice:
h2 {
  background: url(../img/bar_tot.png) repeat-x;    /* niente apici o virgolette dentro quelle parentesi */
  width: 100%;          /* o anche in px, se il caso */
  text-align: right;
  text-transform: capitalize;
  height: ...px;            /* se il caso */
}
h2 .sx {
  width: ???px;          /* come l'immagine */
  height: 100%;
  background: url(../img/bar_tot_left.png) no-repeat;
}
h2 .dx {
  width: ???px;          /* come l'immagine */
  height: 100%;
  background: url(../img/bar_tot_right.png) no-repeat;
}