Make border-bottom span width of center aligned text - css

Question

I want my p text to have a dotted line beneath it that spans the width of the text, I would also like the p to be centered horizontally.
The text never be longer than one line but it will vary in length on that line (if it was totally fixed, I could solve this easily).
I can't quite figure out the solution. I have the following structure:
<div class="container">
<div class="content">
<p>This is the title</p>
</div>
</div>
In my CSS, I have something like this:
.container {
width: 650px;
height: 100px;
}
.content {
text-align: center;
text-transform: uppercase;
font-size: 26px;
color: #4D4D4D;
}
p {
border-bottom: #808080;
border-bottom-width: thin;
border-bottom-style: dotted;
}

Answer 1

Here: http://jsfiddle.net/DqFp7/
HTML
<div class="container">
<div class="content">
<p>This is the title</p>
</div>
</div>
CSS
.container {
width: 650px;
height: 100px;
}
.content {
text-align: center;
text-transform: uppercase;
font-size: 26px;
color: #4D4D4D;
}
p {
border-bottom: #808080;
border-bottom-width: thin;
border-bottom-style: dotted;
display:inline;
}​

Answer 2

You can use text-decoration couples with text-decoration-style, although support for this feature is still somewhat poor (Aug-2018: Not supported in Safari and Edge).
It's in the spec, so it will eventually be supported.
.
Example:
.container,
.content {
width: 100%;
}
.content p {
font-size: 30px;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: red;
text-align: center;
}
<div class="container">
<div class="content">
<p>This is the title</p>
</div>
</div>