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