Normal (rectangular) borders were covered in Borders pt.1; this post focuses on borders with rounded corners.
But! keep in mind that rounded corners are of limited use: at the moment they don’t work in Internet Explorer or older versions of Opera. (If you’re viewing this post using either one of them, you’ll see the right color, thickness etc., but no curves.)
As explained in the previous post, you need a p tag for a single paragraph, a div tag for more than that; you need to set border thickness, type, and color, as well as text padding; plus you can add commands for background color, text formatting, etc.
The basic command for rounded corners is “border-radius:”, followed by a px number to determine how pronounced the curvature will be. Unfortunately, this feature isn’t standardized yet, so you have to add an array of separate commands to make it work with different browser engines (“border-radius:” preceded by “-moz-” for Firefox, Flock, and other mozilla-based browsers, by “-webkit-” for Safari, Chrome, and other webkit-based browsers, by “-khtml-” for khtml-based browsers).
Examples:
Code for this border:
<p style="border:4px solid #9fb6cd;border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:10px;">
TEXT HERE
</p>
Code for this border:
<p style="border:4px solid #9fb6cd;border-radius:15px;-khtml-border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;background-color:#f3e88e;padding:10px;">
TEXT HERE
</p>
You can apply that to each corner selectively. In that case you add “top” or “bottom” and “left” or “right” as shown in the following example (note difference in the moz command):
<p style="border:solid 6px #9fb6cd;border-top-left-radius:12px;-khtml-border-top-left-radius:12px;-webkit-border-top-left-radius:12px;-moz-border-radius-topleft:12px;border-top-right-radius:33px;-khtml-border-top-right-radius:33px;-webkit-border-top-right-radius:33px;-moz-border-radius-topright:33px;padding:10px;">
TEXT HERE
</p>
Code:
TEXT HERE
</div>
To get a circle, you need to observe the following:
width = height [= line-height, for a vertically centered word]
padding number = border number
radius number = (width : 2) + (border x 2)
But, I repeat, don’t forget that none of this works in IE (no surprise…) or older versions of Opera. Also note that if you switch from html to visual in the WP editor, parts of the code may be stripped out, destroying the effect.
https://wpbtips.wordpress.com/
wordpress tips 
Panos, this is a cool tip especially creating a circle.
Posted by RP | November 21, 2009, 15:11Hi RP! Yeah, circle’s cool – but damned Explorer won’t show it…
Posted by Panos | November 22, 2009, 03:10hi then,
I just made a post using your code.
I am wondering what happens with “damned Explorer” in a post using this code?
I hope what I posted looks oK? http://1tess.wordpress.com/2009/11/21/spaghetti-napolitan/
With wordpress, switching between visual editor and html editor messed the results of the code. But my post was done without the messy visual editor…
Posted by Tess | November 22, 2009, 04:56@Tess: In Deplorer you get plain rectangular borders (color, thickness etc. ok – just no curves).
Visual messes this one too? Damn again (hadn’t tried it)!
Guess I must note both of these in the post too. Thanks as usual!
Posted by Panos | November 22, 2009, 09:58Ok.
I’m not sure, but does the visual editor work differently in different browsers?
In Firefox the v.e. strips out “-moz -border -radius: 20px;”
but it doesn’t in Safari.
And Firefox needs that in order to show the rounded corners, but Safari doesn’t.
(Both insist on adding   ; which is annoying…)
Posted by Tess | November 22, 2009, 19:59Hadn’t tried that either (I always use Firefox for editing). Tried it now, and yes no stripping out in Safari. I’m not paranoid enough to check what happens with the visual editor in all major browsers (plus PCs vs Macs – yet another difference maybe?), so in the post I think I’ll just add that if you switch to visual the code may be stripped out.
Posted by Panos | November 23, 2009, 03:25Too many variables to try.
It should have been obvious, but it never occurred to me:
I also use just the one for editing.
Only, I was curious—
so it’s a surprise that in this case Sarfari is more friendly.
Nice code. Fun.
Thank you.
Posted by Tess | November 23, 2009, 11:26“Too many variables to try.” Right: too many variables, too little to gain – that’s what I meant by not paranoid enough!
And I don’t find this difference obvious: I was also surprised. Out of curiosity, I now tried these two in Safari:
<div style="height:1.4em;"> </div>
<div style="height:1.4em;visibility:hidden;"> </div>
First one gets stripped out, second one survives the switch. Go figure…
Posted by Panos | November 23, 2009, 11:49Ah no, it’s worse than that: with a space between the tags, they survive the first time you switch, but the space is deleted, so if you switch again, poof! If you use the nbsp code instead of a plain space, they are retained (again in contrast to Firefox). That’s the reason I ended up suggesting the “ANY_CHARACTER_HERE” version instead of an empty div.
Posted by Panos | November 23, 2009, 12:02Panos,
Just a suggestion:
You have excellent collection of tips for newbies like us. Why don’t you provide an e-mail subscription feature, so that we can get your posting by e-mail
Posted by RP | November 23, 2009, 20:30@RP: Thanks for the suggestion (and the compliment)! I have no way of knowing if the RSS I’ve added is of any use to anyone, but since I’ve put that anyway, I guess it’s reasonable to add the mail subscription too.
Posted by Panos | November 23, 2009, 22:51‘K then.
But it is not paranoia.
It’s obsession—for me, anyway. Fascination. Oh, Don Quixote!
Making a post look like something printed. They are different media—
No mind. I’m working up to using the circle…
Nice code. Fun.
Thank you.
t
Posted by Tess | November 24, 2009, 06:51ta blockquote doesn’t work?!!!
Posted by Tess | November 24, 2009, 06:52@Tess: Well, I guess the difference is the “too little to gain” I added. “Fascination” or “obsession” I obviously share (take the circle, for instance: I worked it out just because I thought it could be done; hadn’t seen it anywhere, and it took me quite some experimenting to figure out the px relationships involved). So, fun codes you can twist is both enjoyable and instructing to me; trying to make a post “look like something printed” (or in any way elaborate, like you systematically do) is all the more so. On the other hand: on my iMac I’ve got four browsers installed; I would have to download and install more browsers, and edit a post using each one of them in turn; then I would have to unearth the two laptop PCs we have (running two different Windows versions, with two browsers installed in each), download and install several browsers, edit and edit and edit a post again… All that to find out in which cases moz-border-radius gets stripped out and in which it doesn’t? No way!
Blockquote works: note it’s indented. Garland is discreet!
Posted by Panos | November 24, 2009, 11:41I made a round table.
King Arthur pun aside, the rounded border code works with tables.
Would not have thought of trying it, but my video wouldn’t behave in Safari.
One row, one cell: that makes it simple should one want to center a paragraph in a circle as well.
Posted by Tess | November 26, 2009, 19:05“Round table”? Ha! Hadn’t thought of that, but it makes sense, since table codes include “border”. However, I’m only seeing the circle in Firefox (Flock: distorted; Safari: square). Sorry, too tired now to experiment with it.
Posted by Panos | November 27, 2009, 00:16hmm?
“…rounded corners are of limited use…”
~code for connoisseurs, adventurers, and devil-may-care fools~
Odd that it looks good on my computer: OS 10.5.8, Safari 4.0.3. Tried 2 other Macs and all look like circles in Safari.
Also tried this: http://browsershots.org/http://1tess.wordpress.com/2009/11/25/sand-circle/
Posted by Tess | November 27, 2009, 19:41Have you tried negative radius? I’m too tired to experiment now, but it just occurred to me: might be a thought? Might you get concacve curve instead of convex?
Posted by Tess | November 28, 2009, 03:36My fellow “connoisseur” (etc. etc.!) would probably like to know that Safari accepts other tricks too: you can rotate or skew the whole frame! See here: http://www.the-art-of-web.com/css/border-radius/
Negative radius? Ah, great thought – hadn’t thought of that either (seems I’m writing that a lot lately)! That could give you that antique sign look (you know, the metal ones with holes for screws near the corners). But I just tried it now that you suggested it, and it doesn’t work. In theory you could get that effect by creating quarters of a circle and superimposing them on the corners of a normal frame; but the amount of html and trial&error you’d need tells me I’d better let the idea pass away in peace…
You also discovered another thing I’ve failed to mention in Borders pt.1: that you can create complex borders by nesting them.
By the way, have you seen the bad news about your beloved Excerpt?
Posted by Panos | November 28, 2009, 09:44Thanks for the link—the first use of rotating which comes to mind is that you could rotate 90° and have a title as on the spine of a book. Within a table, you could have a nice graphic display of title and article. Of course, this could be done easily in Illustrator. And I wonder how messed it would look in IE. LOL
The antique sign, then will be imagined only.
Huh. Nesting was my first thought! feminine instinct, perhaps? [groan]
What bad news about Excerpts?
Posted by Tess | November 28, 2009, 17:52This bad news:
http://en.forums.wordpress.com/topic/read-full-post-option?replies=5
(Now incorporated in my relevant posts of course.)
Posted by Panos | November 28, 2009, 22:11Oh.
Had not thought about that, but now you mention it, the Youtube on a recent post doesn’t work—it’s the only time I put a short-code into an excerpt.
Latest post looks a mess in Safari. I can’t tell if I’ve made a mistake or if it is Safari.
Posted by Tess | November 28, 2009, 23:28Re latest post: I think you should abandon the idea of putting the border-radius in the table style. I tried the circle-within-a-square part of your post: I simply copied and pasted the opening table tag with all its style elements, changed “table” to “div”, then added the complete table code, deleted the table style elements, and got a perfect circle (in Safari).
Posted by Panos | November 29, 2009, 02:29I fixed the posts. And now I’ve played with the link you gave me.
Bad news is that wp strips out the “-webkit-transform:” so the rotate and skew do not work. I tried it on my work website and it worked beautifully. Took it down because it works only in Safari anyway…
So I moved on to experiment with the box shadow effect. You can see it in today’s post.
But I’m confused: it says
I am probably missing something but I couldn’t get it to work in Firefox. (nor the transform/ rotate / skew on the work site)
Ideas?
Posted by Tess | December 5, 2009, 20:48Today’s post: beautiful! (in Safari…)
The update on Firefox says “use the Firefox shorthand from the next section for the rounded corners”. Apparently that refers to having to use a slash between numbers for the radius, but I haven’t tried it, so no ideas (yet).
Posted by Panos | December 5, 2009, 22:04I’m only using a plain rounded border: not an elliptical border, not anything for separate corners…
It’s got to be something else. (I’ve tried adding / in various places) Maybe I should not use the code for borders on picture borders? Like my round table failed? (though that looked good on the 3 computers I tested it on—that could be related to screen resolution?)
just curious. this is all experimental. a back-burner issue…
Posted by Tess | December 6, 2009, 00:44As I said, no idea yet. I’ll try things when I can (I’m curious too!), but it can’t be tonight.
Posted by Panos | December 6, 2009, 01:40“Update” :-)
Panos: the new Opera version (10.50) shows perfectly the borders with rounded corners. They are so beautiful!
Thanks for the post.
Posted by Galois | March 6, 2010, 18:08@Galois: Thanks for briefing – post updated accordingly!
Note: new Opera version not available for Macs yet.
Posted by Panos | March 6, 2010, 18:18Hi Panos, I tried to use a blink effect to text on my blog. That effect works well in Mozilla and Opera browser, but it does not work in Chrome and IE. What code should be added so that the blink effect can work well in Chrome and IE?
Thank you.
Posted by Om Kicau | January 23, 2011, 20:32What code? Nothing! Your HTML is correct, but Chrome, IE and Safari simply don’t support blinking.
Posted by Panos | January 23, 2011, 21:00Panos, could you bear to have a look at ME >>>IGNORE THIS >>>subsection CATTERAL (published so that you can SEE it!)
It is a short silly verse with an image. I have amazingly succeeded in putting a border around it BUT it is too wide (that is I would like to take about an inch off the sides and put a little bit more space at the bottom.
Is there a bit of code I can use to do this?
I have tried some trial and error but it hasn’t worked.
Thanks a lot if you have time.
Once I have the idea of this I can probably fill in the numbers….
Posted by Julia Matcham | March 14, 2011, 21:11Since you want a narrower box, I need to know if you want that narrower box left aligned or centered.
In the meantime, some (hopefully helpful) generalities:
• When it comes to browsers and monitors, you must start thinking in pixels instead of inches. (One px is the narrowest you can have. The first thumbnail on your homepage is 155px wide. Your main column is 640px wide.) Pixels are pixels, while how many pixels make one inch depends on your screen resolution.
• div means section.
• padding is the space between the border and the content inside it.
• margin is the space outside the border.
• Both padding and margin can be controlled on all four sides together or not. For example, you can write:
margin:12px; (all four sides)
margin-top:12px;margin-left:48px; (those two sides only)
margin:12px 6px 0 8px; (top, right, bottom, left)
Posted by Panos | March 14, 2011, 22:08Thanks…I will try that tomorrow.
I have made the clock a bit bigger…(I didn’t want it to compete too much with my graphics).
Centred if the verse is centred would seem to look balanced.
Didn’t manage to put the world time on…although I can see that TEXT was there to repeat. I’ll try again. Just irresistable to be able to do it! Thanks.
Posted by Julia Matcham | March 15, 2011, 00:13You’ve written this:
<div style="border:2px solid #3E766D;padding:1em;">
This says start a section here (containing everything up to the /div tag) with such-and-such a border and that amount of padding. When the width of a section isn’t specified, full-width is implied. So one way to make the box narrower is to specify a width (either in pixels or as a percentage) for this div, and make the div centered. To increase the space below the verse, you need extra bottom padding. In all:
<div class="aligncenter" style="width:440px;border:2px solid #3E766D;padding-top:12px;padding-bottom:30px;">
Posted by Panos | March 15, 2011, 08:40As for the content of this div, it’s full of redundancies, probably because you formatted it via the tools of the visual editor.
a) Since everything inside the section is centered, the corresponding command (text-align:center;) should have been added to the opening div tag itself.
b) Instead of strong and color tags opening at the beginning of each line, closing at the end of the line, opening again for the next line etc., there should be one of them at the beginning of the lyrics and one at the end:
<p style="color:#336633;font-weight:bold;">
COMPLETE VERSE HERE
</p>
And I would never use headings to control the color and the size of the text, because if you switch themes they will change.
Posted by Panos | March 15, 2011, 09:05Just so you know, I print out what you tell me! It takes me time to work it all out.
Is it wrong to switch between Visual and HTML ?
Obviously for me it is easier to see what I am doing.
I don’t understand the last bit about using Headings etc…I thought that was part of the way WP is structured?
Do you mean that it is a bad idea to have colour headings?
Anyway it is keeping the Alzheimers away!
As usual THANKS
Posted by Julia Matcham | March 15, 2011, 20:08Hi Panos, I have spent hours trying to do what you suggested and half the time when I have done it, I view the result, see it is wrong go back to edit (HTML) to find it has made its own decisions! Now I can’t stop it underlining. I keep deleting that bit but it WONT take any notice. Nor will the visual editor. Some of it has worked but my goodness one can’t make the slightest error (colon or semi) …
Perhaps you could be kind enough to have a look. Believe me it isn’t for lack of trying to guess alternatives!
Time for a drink! Cheers. J
Posted by Julia Matcham | March 15, 2011, 21:34Switching from Visual to HTML is always harmless; switching from HTML to Visual is harmless, except in the case of a few codes that aren’t to Mr. Visual’s liking and get stripped out.
Perhaps you’re starting to realize that HTML never makes its own decisions while the Visual does, especially when you try to add additional formatting to content already formatted via some other tool. In the Visual you only think you see what you’re doing: in reality when you highlight something you can never be sure you’re selecting exactly what you should be selecting. Plus various other side-effects, because the tools of the visual editor are mediocre, fit for some simple operations only.
Your text is now underlined because you have somehow managed to turn the title and the verse into links to the image. In the Visual, you can try highlighting the text and clicking the Unlink button. (See? I can’t be sure it will work, while in the HTML editor I would say remove this, delete from here to here, etc., and I would be absolutely certain about the result.)
As for the h1-6 tags, they are meant for headings only. That is, if you write a complex post with chapters or other titled subsections, you can style your titles using one of the Heading buttons if you want the style of those titles to match the theme headings. The style of each Heading varies from theme to theme, so you shouldn’t use those buttons just because you want that size or that font or that color: if you change theme, you’ll get a different result. Some examples:
Posted by Panos | March 16, 2011, 00:19OK, that UNLINK worked! Thanks. I thought those links were for page links etc….
Now I am trying to position the whole box + contents lower.
I keep trying to add… margin-top:50 px ….to that first HTML in the order-to-the-page top bit (guess there is a word) but it simply does nothing and cancels it on return. Is that because I am adding it later? Or should that be done separately (eg above that first two lines of HTML?)
Is there a specific order that I should be entering the ‘instructions’?
Once I have got one pattern of how it works I expect I will be able to apply it to other stuff.
Posted by Julia Matcham | March 16, 2011, 13:52Oh Brilliant…I just used your other bit of code for adjusting space, separately at the top and it worked!!! I am always so surprised when that happens. I expect n-o-t-h-i-n-g!
Triumphs as far as I am concerned. J
Posted by Julia Matcham | March 16, 2011, 14:25But all is NOT well! Now I see that on that page, the side panel has also suffered from ‘instructions’ to go down and has almost dissapeared. It is alright on the other pages (thankfully)!
How do I put that right?
Rather interesting because it appears that if one wanted one could do something different on an individual side panel like add photos in the top area …maybe one could.
Posted by Julia Matcham | March 16, 2011, 14:36Welcome to the notorious sidebar-at-the-bottom effect!
Your widgets have dropped below the content of the page, because you added an opening div tag only. Every opening div tag says apply this and that from this point on: it must always be paired with a closing tag that says up to this point, otherwise it will mess the whole page.
To make sure it won’t happen again, go to Settings>Writing, tick the option “WordPress should correct invalidly nested XHTML automatically”, click Save Changes. (This option is incomprehensible to the average user, so why WP keeps the default to off instead of on remains a mystery to us.)
But you didn’t have to add an extra div tag at all. You should add the margin to the existing div, as you originally thought, i.e. turn this:
style=”width:440px;[etc.etc.]
to this:
style=”margin-top:50px;width:440px;[etc.etc.]
If it didn’t work when you tried it, then you made a typo. For example, in your 13:52 comment above, you’ve written “margin-top:50 px”: you can’t have a space between the number and the unit.
And no, it doesn’t matter if you put it before or after other attributes.
Posted by Panos | March 16, 2011, 15:11Thanks very much I will check that although it seems to have corrected itself …and I noticed the extra ‘div’ appeared. Slow learner! The penny dropped.
And the space between the unit and px …I think that is why something else is not working.
I keep trying to insert a colour for the body text and for the life of me I can’t work out where to put it…it messes up every time. I think I CAN do it in Visual…but then it gives me as you said before a lot of redundant HTML before every line. I would like to be clear about how to do this in HTML. I can see that really it is more convenient.
Posted by Julia Matcham | March 16, 2011, 16:04What am I doing wrong? No color happens?
Rude Catteral
The etc
Posted by Julia Matcham | March 16, 2011, 16:14Oh…why did that happen!
Rude Catteral
The
Posted by Julia Matcham | March 16, 2011, 16:15I was trying to send you the code that precedes the main text…but never mind. I guess there is some rule. Cheers.
Posted by Julia Matcham | March 16, 2011, 16:17Never mind? I’m not a never-mind guy!
Check point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
But if you’re talking about code you have used in a page, I only need the link to that page: I can see your HTML.
Posted by Panos | March 16, 2011, 16:52I seem to have got the colour bit to work after inserting code for the umpteenth time …and it seemed to be because I put an extra at the bottom, although later this promptly dissapeared. Maybe one needs to do that when adding a bit of code so that it notices or am I being a bit anthropomorphic about that! At any rate it does seem a bit unpredictable; I am sure I did it the same previously and it didn’t work. Also, the padding is clearly not 40px top and bottom (but what I have I don’t mind about) it seems to have remembered a previous setting. Altering one bit to 40 was more by way of seeing if it accepted my orders which it seems to me sometimes it doesn’t!
I’ll give you the link next time. Silly of me not to have thought of it.
Anyway I learn a bit…a lttle bit…every time.
Thanks to you, have lined up the clock with type and put it at the top which is very pleasing!
Cheers. J
http://juliamatcham.wordpress.com/catteral/
Posted by Julia Matcham | March 16, 2011, 17:44an extra code final p at the end. Your blog deleted it!
Posted by Julia Matcham | March 16, 2011, 17:47The space below the top border is 40px. The space above the bottom border is larger because the end of the text is the end of a paragraph: paragraphs have their own (auto) bottom padding or margin, which gets added to the 40px you specified. As you said in a previous comment, you just play with the numbers till you get the result you want.
Posted by Panos | March 16, 2011, 23:10I get it. Thanks a lot Panos, if I ever get things right, I will miss you! Not that I can think of much more to do.
Cheers, Julia
Posted by Julia Matcham | March 17, 2011, 14:51WOW! You are just too good! Thank you! Thank you! Thank you! for every bit of information on this site. I’ve got this site bookmarked.
Posted by arapesh dou | September 23, 2011, 17:51You’re welcome and thanks for your kind words.
PS You should correct your username link: it links to a deleted blog.
Posted by Panos | September 23, 2011, 22:31