Borders (pt. 1)

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;">
CONTENT HERE
</div>

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:

solid
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)

For a border combined with a colored background, you add this to the code (inside the quotation marks):

background-color:#HEX HERE;

To constrain the width of the whole block (like I’ve done above), you add this:

width:NUMBER HEREpx;

To center such a reduced-width block, you need this:

<div align="center">
COMPLETE BORDER CODE HERE
</div>

To constrain the width of the whole block, and have the rest of the content wrap around it, you add this:

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.

Rate this:

Share this:

Like this:

Related

Discussion

31 thoughts on “Borders (pt. 1)”

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. Τώρα, μάλλον Έλληνας είσαι οπότε σου λέω ‘συγχαρητήρια’ και στη γλώσσα μας!!

Γειά σου Μαρία (ε, ναι, με αυτό το 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.)

I’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?

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:

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.

I 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…

@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…

Color 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 &frac14; ¼ {one-quarter} &frac12; ½ {one-half &frac34; ¾ {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.

Yes 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.

Yes 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?

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.

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.)

Author

Recent Posts

Subject Index

Search for:

Announcement 22/03/2012:
After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

2,727,605 views

Views per month:

Note: if you see ads on this site, they are placed by WordPress, not me.

Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.