Code model (in the html post or page editor, of course, as well as in text widgets):
<div style="border:1px TYPE #HEX;padding:1.2em;">
The numbers given above are examples. The border number determines the thickness of the border (1px = thinnest). The padding number determines the amount of space between the border and the content. Note that em is a proportional unit (related to the default font size); for a fixed space use px instead (for normal purposes, around 10).
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:
<img style="border:1px TYPE #HEX;" src=[etc. etc.]
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:
The first four are self-explanatory; the other four are 3D/shadow effects. Examples:
For a border combined with a colored background, you add this to the code (inside the quotation marks):
To constrain the width of the whole block (like I’ve done above), you add this:
To center such a reduced-width block, you need this:
COMPLETE BORDER CODE HERE
To constrain the width of the whole block, and have the rest of the content wrap around it, you add this:
width:NUMBER HEREpx;float:left;margin-right:NUMBER HEREpx;
(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.