CSS and the property “outline”

Published by TheJoe on

Estimated reading time: 2 minutes


This article was published more than a year ago, there may have been developments.
Please take this into account.

As many will know the CSS3 have not yet been fully implemented by browsers, we do not serve in the first part of this tutorial!. Already implemented by specific CSS2 was the property "outline”. Let us look at an example:

p.test {
    border: 1px solid #000000;
    outline: 3px solid # 6374AB;
    width: 20in;

These few lines require the creation of a one pixel black border around the paragraph, and a outline (esterno to shore) color "# 6374ab" of three pixels. It also specifies the width of the paragraph. The result is the following:


But what should we do if we needed an outline effect applied to the contours of the words? In this case we should serve the CSS3, which as already mentioned are incomplete implementation and are not yet standard, but since it is just a visual effect applied to text is enough to give a little 'attention because it continues to read the content.

The technique here below might not be the most "Orthodox”, but certainly solves the problem. With CSS3 you can create one or more shadow to text, and they we create eight different (all the cardinal points and the intermediate) we would have solved the issue. Un'ombra the nord, a north-east, one ad is, etc.. The following image is a little explanation of what I want to achieve:


The only rule is to be applied "text-shadow”, available only in the third version of CSS.

    red 1px 1px 0px,
    red -1px -1px 0px,
    red 1px 0px 0px,
    red -1px 0px 0px,
    red 0px 1px 0px,
    red 0px -1px 0px,
    red 1px -1px 0px,
    red -1px 1px 0px;

And this is the result:

Look here:  OpenVZ, a "virtual private server" open source
Categories: GraphicsWeb


I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.