Posted by Jukka K. Korpela on 05/26/07 11:09

Scripsit -:

> I'm new with CSS; can someone help me get this effect :
> - text with colored borders (if possible with rounded corners),

If you want rounded corners, you have three options:
1) Use a table, as people have often used for such purposes (a 3 by 3 table,
with images in the corner cells, etc.).
2) Use -moz-border-radius, accepting the fact that browsers other than
Mozilla won't round your corners.
3) Stop wanting them. :-)

> colored background or picture and controlable margins (see upper
> picture in the link ). All I could get is the uggly thing under:
> http://www.rentonic.com/borders/model.html

Apart from the rounded corners issue, this is rather easy. You have set
border-style to groove, and that's what you get. You probably want to set
border-style: solid. And you need to add padding to the p element, e.g.
padding: 0.5em 1em. You also need to modify the color value to get the one
you have in the picture.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Back to original message]