How do I add border around a paragraph in Wordpress

I have posted this question to the Wordpress forums and got the following answer: http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

I thought I understood what was being said here but nothing seemed to work. I asked again and so far nothing. I have always used the <table><tr></tr></table> code on my website without problems. It does not in Wordpress. Any suggestions on how to place a box or border around a particular paragraph? Thanks…

My blog is http://www.stoutstandards.wordpress.com

It should be a simple matter of choosing the right selector to use with your CSS
Is this what you’re wanting to style - all of them?

<div class="entry entry-content">
	<p>John Howland offers up a few ideas on how something like the <a href="http://finds.org.uk/"> PAS</a> might work here in the states.
  I would love it of course, but have pretty much given  up hope of seeing something like this in my lifetime.
  It would take a lot of money, effort and interest, all missing ingredients here in the states.
 I hope you will take  the time to read John&#8217;s thoughts.
  Perhaps down the road someone will take up the mantle and make it happen.
<i> <a href="http://stoutstandards.wordpress.com/2014/01/29/an-antiquity-scheme-for-the-us/#more-8632" class="more-link">Continue reading <span class="meta-nav">&rarr;</span></a></i>
</p>

Thanks but that didn’t work either.

What CSS did you try? i.e. the selector and rule(s)

I have tried any. Since I upgraded to their customized program a lot of CSS is already there. What do you suggest? I can add.

If you target the p tag you’re likely to affecting a lot more than you want to.
I’d try adding

/* custom style added 2014-02-05 */
div.entry p {
  border: 1px solid #ff00ff;
  padding: 1.2em;
}

just to see if that’s getting to what you want. If it gets what you want and doesn’t affect things you want it not to, adjust the values and you should be all set.

Barnum, if you can post a copy of a paragraph from your blog, we can be specific, otherwise, we can only give approximate guesses.

One can add a border around a box with the “border” property:


    border:2px solid #f00;

The box can be a <td> cell, a <p> paragraph tag, a <div> or most anything else.
eg:


td.thiscell {border:2px solid #f00;}

p.thisparagraph {border:2px solid #f00;}

div.thisbox {border:2px solid #f00;}

The class is used to target a particular box.

Are you using the paid version of wordpress.com which allows styling? Otherwise it may not work. I got around that problem by using inline styles.

It will depend on your theme.

the quick BAND-AID solution, assuming you only qant to style a SPECIFIC P , in a specific story… is to go to your WP dashboard, where you edit the story , and select the HTML view and find te P you wanted to style then add the code inline:


...
<p>... </p>
<p [COLOR="#FF0000"]style="border:10px solid pink"[/COLOR]> ... </p>
<p>... </p>
...


you could also use the CSS/ theme editor but you would need to know a pattern to set that paragraph apart ( example, the 3rd paragraph in the first story of a multi story blog)

hope that helps

Thank you all. This is the page where I want to add a paragraph border (actually two or three paragraphs)…starts with “A Warsaw Wally Update” and ends with"cavelier with their finds". Hope that makes sense.

I think you forgot to include a link to the page :slight_smile:

Hah, I did. Sorry, senility is setting in. Thank you for setting me straight. Let’s try this…

Hi, Barnum.

Basically, you need to put a container around those paragraphs. In other words, they need to be inside a parent <div>. Then you can give that parent div a border and some padding and you’ll be all set.

Insert a close div below line 236


[color=blue]</div>[/color]

Insert an open div above Line 223


[color=blue]<div style="border:1px solid red; padding:16px;">[/color]

It should look something like this:


[color=blue]<div style="border:1px solid red; padding:16px;">[/color]
<p style="text-align:center;"><strong><span style="color:#800000;">A WARSAW WALLY UPDATE FROM JOHN</span> </strong></p>
<p style="text-align:center;"><em>Wednesday, 29 January 2014; From Paul Barford?s<a href="http://paul-barford.blogspot.com/"> Blog</a></em><a href="http://paul-barford.blogspot.com/"> </a></p>
<p>What he?d have the World Believe: (complete with Barfordese spelling)</p>
<p style="text-align:center;"><a href="http://paul-barford.blogspot.com/2014/01/metal-detecting-looter-caught-in.html"><b>Metal Detecting Looter Caught in Calabria</b>.</a></p>
<p>Police on Tuesday arrested a 34-year-old man as he was trying to abscond with artifacts from Capo Colonna Archaeological Park near Crotone?.</p>
<p>Read more at: The Achaeology News Network, 29<sup>th</sup> January 2014.</p>
<p>Posted by  Paul Barford   at  12:57     No comments:   Links to this post</p>
<p align="center"><span style="color:#800000;">??????????????????..</span></p>
<p style="text-align:center;"><b>What <i>ACTUALLY</i> Happened:-</b></p>
<p>The <i>Archaeology News Network</i> reported the facts thus:</p>
<p>The would-be robber, who was identified by the initials I.F., was caught by <b><i><span style="text-decoration:underline;">a metal detector</span></i></b> [<i>my highlights</i>] as he attempted to leave the 30,000-square-meter-park on a promontory overlooking the Tarentine Gulf with his loot.</p>
<p style="text-align:center;"><span style="color:#800000;">??????????????????..</span></p>
<p>The factual ineptitude of Barford?s Blog is only surpassed by his unique spelling; further proof, if further proof were needed, that his lame-brained Blog can only pump out 24-carat twaddle!</p>
<p>This type of calculated deceit apparently supported by the <b>Council for British Archaeology </b>because of their<b> </b>hand-in-blouse,<b> </b>heavy petting sessions with<b> </b>the Warsaw Warbler, somewhat negates their wild claims ? and his &#8211;  that metal detectorists are cavalier with their finds.</p>
[color=blue]</div>[/color]

You can change the width, style, and color of the border to suit yourself. You can even give it rounded corners, if you wish, by adding {border-radius:16px} in the open div code.

DO NOT Copy and Paste that last selection of code into your page. Some of the characters were changed by my editor. See the question marks? Just insert the blue lines as shown.

Thank you so much…it worked very nicely. I could have sworn that I did something similar but then again I can’t remember what I had for breakfast. Many thanks…appreciate it. Now I can do this with future updates.

Glad it’s working the way you wish, Barnum. Thanks for the feedback.