you're reading:
Borders, Html & inline css codes

Borders (pt. 2)

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


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;">

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;">

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;">

The border-radius code can be manipulated to produce various shapes, including a full circle; example (no that’s not an image!):


<div style="border:solid 15px #9fb6cd;border-radius:100px;-khtml-border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;width:140px;height:140px;text-align:center;font-size:400%;color:#cd3278;line-height:140px;padding:15px;">

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.

Please don’t paste code in comments – see comment guidelines.


55 thoughts on “Borders (pt. 2)

  1. Panos, this is a cool tip especially creating a circle.

    Posted by RP | November 21, 2009, 15:11
  2. Hi RP! Yeah, circle’s cool – but damned Explorer won’t show it…

    Posted by Panos | November 22, 2009, 03:10
  3. hi 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?
    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
  4. @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:58
  5. Ok.
    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 &nbsp ; which is annoying…)

    Posted by Tess | November 22, 2009, 19:59
  6. Hadn’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:25
  7. Too 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
  8. “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:49
  9. Ah 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:02
  10. Panos,

    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
  11. @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
  12. ‘K then.
    But it is not paranoia.

    that’s what I meant by not paranoid enough!

    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.

    Posted by Tess | November 24, 2009, 06:51
  13. ta blockquote doesn’t work?!!!

    Posted by Tess | November 24, 2009, 06:52
  14. @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:41
  15. I 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
  16. “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:16
  17. hmm?

    “…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:

    The site has no Mac, but with WindowsXP:
    msie=square (older versions don’t even show my sidebar and blue background), opera=square, safari=square.
    Good: Firefox (older versions distorted), Flock, Chrome, Navigator, SeaMonkey, and Iceweasel (older versions distorted).

    Posted by Tess | November 27, 2009, 19:41
  18. Have 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:36
  19. My 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:

    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:44
  20. Thanks 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:52
  21. This bad news:

    (Now incorporated in my relevant posts of course.)

    Posted by Panos | November 28, 2009, 22:11
  22. Oh.
    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:28
  23. Re 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:29
  24. I 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

    Updated: Firefox now also supports an identical syntax for these effects – just replace -webkit with -moz for the effects, and use the Firefox shorthand from the next section for the rounded corners.

    I am probably missing something but I couldn’t get it to work in Firefox. (nor the transform/ rotate / skew on the work site)


    Posted by Tess | December 5, 2009, 20:48
  25. Today’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:04
  26. I’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:44
  27. As 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
  28. “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
  29. @Galois: Thanks for briefing – post updated accordingly!

    Note: new Opera version not available for Macs yet.

    Posted by Panos | March 6, 2010, 18:18
  30. Hi 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:32
  31. What code? Nothing! Your HTML is correct, but Chrome, IE and Safari simply don’t support blinking.

    Posted by Panos | January 23, 2011, 21:00
  32. Panos, 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:11
  33. Since 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:08
  34. Thanks…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:13
  35. You’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:40
  36. As 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;">

    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:05
  37. Just 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:08
  38. Hi 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:34
  39. Switching 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:19
  40. OK, 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:52
  41. Oh 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:25
  42. But 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:36
  43. Welcome 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:


    to this:


    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:11
  44. Thanks 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:04
  45. What am I doing wrong? No color happens?

    Rude Catteral
    The etc

    Posted by Julia Matcham | March 16, 2011, 16:14
  46. Oh…why did that happen!

    Rude Catteral

    Posted by Julia Matcham | March 16, 2011, 16:15
  47. I 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:17
  48. Never mind? I’m not a never-mind guy!

    Check point 4 here:

    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:52
  49. I 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

    Posted by Julia Matcham | March 16, 2011, 17:44
  50. an extra code final p at the end. Your blog deleted it!

    Posted by Julia Matcham | March 16, 2011, 17:47
  51. The 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:10
  52. I 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:51
  53. WOW! 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:51
  54. You’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


  1. Pingback: Sand Circle Birthday | Tess's Japanese Kitchen - August 30, 2013


author's avatar panos (justpi)

 Subject Index

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.


  • Views per month:
Safari Icon Firefox - Never Internet Explorer
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 forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: