decorate text


is there a way to decorate text using css?

i dont just mean underline and overline.

i am looking to add a small black line that flows around the letters of some white text.

Who is Participating?
radnorConnect With a Mentor Commented:
As GrandSchtroumph said, this will get the illusion of a shadow, but does dupr the text....

I've used it on a site there page titles needed the shadow and where I did not want "another" graphic file...

.white {
      position: absolute;
      font-size: 20px;
.black {
      position: absolute;
      color: black;
<body bgcolor="green">
<span class="black">Occasion Flowers</span>
<span class="white">Occasion Flowers</span>
<span style="text-decoration:underline;">underlined text</span>

<span style="text-decoration:overline;">overlined text</span>

<span style="text-decoration:line-through;">strikethrough text</span>

naifyboy123Author Commented:
hi roonan

that's not what i mean.

i meant to decorate text as per

you will notice the green background - but the white text has a small black line going round it like a border.

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

For internet explorer you might be able to use different filters.
However for this kind of things, you'd better just use a graphic.

naifyboy123Author Commented:
thanks roonan  -  i was afraid that would be the anwser.

the text i want to change is pulled from a db, so i can produce a grpahic.

will leave the Q open for a couple of days to see if anyone else can help.

thanks for help......
That will be possible with CSS3:
For the time beeing you should use graphics.

There is a trick that consists of using several different overlapping layers that contain the same text and use some offsets to give the illusion of a border, but that's not recommended because it requires artificial duplicate content.
In case you want to do that, using non-obscursive javascript to duplicate your text is the best option.
naifyboy123Author Commented:
thanks - do we have to wait for people to update their browsers before css3 will work? or when will it be available?
> do we have to wait for people to update their browsers before css3 will work? or when will it be available?

Yes, CSS3 is still in its draft version.  But Firefox 1.5 already implements some features of CSS3:
naifyboy123Author Commented:
thanks guys - radnor offered me a solution using css - although not ideal, it is something i can implement now using css2.

thanks for all your input
> thanks guys - radnor offered me a solution using css
That's exactly what i explained in my first post.
naifyboy123Author Commented:
oops sorry - i took the view that radnor posted code for me....

maybe i should get the points split....
> maybe i should get the points split....
that's fine, don't worry about that...
i just wanted to make sure you read my comments on that technique.
Whatever....  with the points, I'm in a  CLOSE 2nd....  Cant spend em....
naifyboy123Author Commented:
yeah - thanks GrandSchtroumpf i certainly did read your comments.

i always value everything both you and Roonaan have to offer (plus all the other guys) - without your comments past and present i would never have moved on from using FrontPage!!!!  


thanks everyone!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.