Code model (in the html post or page editor, of course, as well as in text widgets):
CONTENT HERE
</div>
The “div” tags will do for any section, including a complete post. For a single complete paragraph you can use “p” instead. For one or more words within a paragraph, like this, you need “span” instead of “div” (probably with a very low padding number – example is .2em).
For a border around an image, you insert a similar style definition between the img and the src tags of the image code:
Where I’ve written HEX, you write the hex number for the color you want (for hex numbers see the “Color” links in my left sidebar). For basic colors you can write a plain word (“black”, “red”, etc.) instead of a hex number, without the sharp sign.
Where I’ve written TYPE, you specify the type of border you want, using one of the following indications:
double
dashed
dotted
outset
inset
groove
ridge
The first four are self-explanatory; the other four are 3D/shadow effects. Examples:
solid (border:1px)
double (border:3px)
dashed (border:2px)
dotted (border:3px)
outset (border:6px)
inset (border:6px)
groove (border:8px)
ridge (border:8px)
COMPLETE BORDER CODE HERE
</div>
(Float left and margin right, or vv.)
You can also add commands for formatting the text inside the frame – see codes for alignments, for spacings, for text color, size, and font.
Finally, instead of a full frame around a text block, you can have a border along one or more of its sides; instead of border, you use one or more of these: border-left, border-right, border-top, border-bottom.
https://wpbtips.wordpress.com/
wordpress tips 
I bumped onto your blog by browsing the support topics and, boy, am I glad I did. My blog is just over a month old and I’m still very new to all this. I’ll start by experimenting with the borders as you suggest above. Thanks for the good work. Τώρα, μάλλον Έλληνας είσαι οπότε σου λέω ‘συγχαρητήρια’ και στη γλώσσα μας!!
Maria
http://mmjaye.wordpress.com
Posted by mmjaye | October 15, 2009, 18:56Γειά σου Μαρία (ε, ναι, με αυτό το username τι άλλο θα μπορούσα να είμαι;) and thanks for the compliments! Hope you’ll find a useful thing or two here. (I don’t think borders should be your priority, but even those can help you get acquainted with html in case you aren’t.)
Posted by Panos | October 16, 2009, 11:34Great tips
Posted by christophertravels | October 22, 2009, 21:41Thanks.
(Pt 2 will be rounded borders.)
Posted by Panos | October 23, 2009, 01:01I’m a new blogger, and I could use some help. I did fine with these instructions for creating a border until I came to the part that centers the whole reduced-width border. That part begins with a “.” Up until then, the instructions were using a “.” How do I incorporate the “div style” with the “div align”? I want the text inside the border to be centered within the centered border. I don’t know how to write the code to have both the text and the border aligned in the center. Did I miss something?
Posted by JhanaJian | December 11, 2009, 07:30Sorry for the confusion. Some of the text in my previous post has disappeared somehow. My email address is [address removed – P.]. Any help would be greatly appreciated.
Posted by JhanaJian | December 11, 2009, 07:38@JhanaJian:
How do I incorporate the “div style” with the “div align”?
Notice that in the model I’m giving, the div-align tag precedes “COMPLETE_BORDER_CODE_HERE”: so it’s a second div enclosing the other div (that’s called nesting, by the way). For example, the code for a constrained-width frame with text centered inside it would be something like this:
<div style="text-align:center;border:2px solid #9fb6cd;width:200px;padding:1em;">
TEXT_HERE
</div>
To center the whole thing, you write this:
<div align="center">
<div style="text-align:center;border:2px solid #9fb6cd;width:200px;padding:1em;">
TEXT_HERE
</div>
</div>
Two things to note:
a) If the text inside the frame is a single word, phrase, or paragraph, you’d better use p instead of div tags:
<div align="center">
<p style="[etc.]">
TEXT_HERE
</p>
</div>
b) In some themes the div-align tag may not work; if you try it and it won’t, let me know which theme you’re using (your blog is set to private, so I can’t see for myself).
PS I removed your e-mail address from your comment: no need to feed spammers.
Posted by Panos | December 11, 2009, 11:41Thank you so much for your help, Panos. You ARE a love!!!
Posted by JhanaJian | December 11, 2009, 14:23You’re welcome!
Posted by Panos | December 12, 2009, 00:33I might be crazy but it seems that no longer works with the latest Firefox/3.6 You can see the border in Safari using the basic color names, but in FF they don’t appear! No idea about IE.
While I’m mentioning quirks, I’ve noticed that the html editor no longer recognizes & frac12 ; unless you switch to Visual and back. (I’ve only tried the fractions codes.)
And the quirk with & quot ; and & #34 ; being automatically changed to curly quotes if you switch to the Visual editor is no longer happening…
t
Posted by Tess | March 21, 2010, 19:46@Tess
What great news that is. Then maybe I’ll try my HTML tables posta gain.
Posted by timethief | March 22, 2010, 03:04@tt:
Yes!! Do it quick!
The various editor interfaces seem to be re-adjusting a lot lately. The visual and html editors work differently from each other of course, but today is the first time I noticed that you can now type straight quotes again. (and still switch btwn html and visual editors—it has worked if one did not switch to the visual editor until recently as well)
The text widget code/editor and the excerpt code/editor each have their own quirks, not necessarily the same as the visual or html editors for posts and pages. Especially the text widget editor, which I think has to do with the CSS styling, but really I have no idea. Alignments are different in the widgets.
And as far as I know, you can still add & nbsp ; (space) as many times as you like to the titles of posts. If you like to make them into 2 line titles…
Posted by Tess | March 22, 2010, 04:52Color names: No problems over here.
Fractions: I’ve never used them, so I don’t know if something has changed. You can use #189 instead of frac12.
Quotes: don’t know about that either.
Apparently WP is more sophisticated than my poor naive mind that says switching from visual to html or vv should mean viewing different aspects of the same content, not ‘improving’ content…
Posted by Panos | March 22, 2010, 13:14@tt: Re your comment on Dark Wood in the other blog, check what happens with the header image too. And check what happens with a table in a post if you have uploaded a bg pic. Fail, fail!
Posted by Panos | March 22, 2010, 13:44Color names: typo missed: Safari doesn’t care if you leave # before color name. I don’t edit in Safari, but husband notice a typo in an old post; fixed it from Safari; later forgot the edit screen wasn’t FireFox. Took me a while to realize what was wrong: I don’t see typos…
(Sorry about that: Could say I need glasses, but already have them.)
Most common fractions in recipes are ¼ ¼ {one-quarter} ½ ½ {one-half ¾ ¾ {three-quarters} It was convenient not to have another number to remember.
The curly quotes are back again. The visual editor was leaving the straight quotes alone yesterday. First noticed as I made yesterday’s post. To celebrate, I made a whole line of them and showed husband. He said I should do something useful like fold laundry… They are curly in my post again.
Motion also handles background image in table oddly.
Posted by Tess | March 22, 2010, 18:32Aarraggghhh!
Posted by timethief | March 22, 2010, 20:53Yes I understand that using frac was more convenient, but at least there’s an alternative. With quotes, no alternative: just found that the other two html codes for a straight quote are also ironed out when you switch to visual (and sorry tt, I hadn’t imagined that when you had that problem).
As for tables in Dark Wood and Motion: found remedy, will do a post on that.
Posted by Panos | March 22, 2010, 22:51Hey there, I am new to wordpress and been getting a bit frustrated not knowing how to change the look of my widgets in the sidebar. I found this post and this blog is awesome! Thanks sooo much :-)
Posted by Bridget | December 9, 2010, 23:41@Bridget: You’re welcome!
Posted by Panos | December 10, 2010, 10:34i’m currently following your blog since last month, and realized you just change the template.. kinda cool.. thanks for the very useful tips about WP.. keep it up..
Posted by azhareldin | June 23, 2011, 06:20You’re welcome! I’ll try to keep it up, although I don’ t have the time to post often…
Posted by Panos | June 23, 2011, 20:13Sir panos, very useful borders. I have tried one for the first time today on my post. – http://orangekamote.wordpress.com/. Thanks a lot! ^-^
Posted by dherbman | August 9, 2011, 12:35You’re welcome! Yes, useful – can enhance the content nicely.
Posted by Panos | August 10, 2011, 04:24Is there any way to align the border left or right too so you can have boxed text and unboxed text side to side?
Posted by Josh Paunil | November 1, 2011, 00:25Yes of course, but I can’t give you the right solution without more specifics. You should either temporarily switch your privacy settings to the middle option and show me what you’re trying to do, or tell me which theme you’re using and explain what you’re looking for: you mean two chunks of text exactly side by side (and if so, chunks of roughly the same size or not), or just with the rest of the text wrapping around the bordered text as it would around a left or right aligned image?
Posted by Panos | November 1, 2011, 01:19I think I’m doing something wrong when I insert the code. I made an example post on a test blog so you could take a look if you have time. No border goes around the content. http://mrsportsfansblog.wordpress.com/2011/11/09/6963/.
This is what I entered into the html:
CONTENT HERE
Posted by Josh Paunil | November 9, 2011, 23:50Oops, I meant I just entered exactly what’s in the box of what you posted.
Posted by Josh Paunil | November 9, 2011, 23:51Re the oops: You cannot display code in a comment by simply pasting it – see point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
Re the actual question: What my box gives is a code model. Check the paragraphs below the second box: the code cannot have any effect unless you replace TYPE with the actual type of border you want and HEX with the actual hex code for the color you want.
Posted by Panos | November 10, 2011, 03:46Thanks! And regarding my earlier question, I mean text wrapped around the border, and the theme I’m using is iNove. I’d like the bordered text aligned right and the wrapped text to the left of it.
Posted by Josh Paunil | November 10, 2011, 09:58You need this code:
<div style="float:right;width:40%;border:1px solid #456789;margin:4px 0 2px 10px;padding:12px;">
RIGHT ALIGNED BOXED CONTENT HERE
</div>
All the numbers are just examples, of course.
• Change 40% to change the width of the box. (40% means 40% of the total width of your post column. You can use an absolute value instead, for instance 240px, but I think specifying a percentage gives you a clearer idea of how wide the box will be.)
• Change 1px to change the thickness of the border.
• Change 456789 to change the color of the border.
• Change the margin numbers to change the space between the box and the text around it (four numbers = top, right, bottom, left).
• Change the padding number to change the space between the border and the text inside the box. (You can replace the single value with four values, as with the margin, in case you don’t want the same amount of space around all four sides of the boxed text.)
Posted by Panos | November 10, 2011, 14:55PS If you’ve checked the option “Notify me of follow-up comments via email”, make sure you copy the code from here, not from the mail.
Posted by Panos | November 10, 2011, 14:57