Textured Border in CSS

The border attribute of the style sheets can vary in color and width, but it was not expected to give it a texture. However, only a CSS rule is required to add this graphic effect...

The rule applies to the fieldset tag designed to show a border, and we'll add it a texture.
We could do the same with a layer, but the advantage of fieldset is, at least in Firefox, to get round corners.

The principle is to assign a texture to the whole fieldset and insert into it another fieldset (for rounded edges) or a div, whose background is the same as that of the page.

<fieldset>
    <fieldset class="inner">
        ... text ...
    </fieldset>
</fieldset>

You can embedd a title in the border as in the demo.

<fieldset  style="width:500px">
    <span class="btitle">Titre</span>
    <fieldset class="inner">
    ... text ...
    </fieldset>
</fieldset>

The stylesheet will set the margins. For rounded corners, we add this attribute:

-moz-border-radius:8px;	
border-radius:8px;

To have a white background in WYSIWYG editing mode, you can use to the background a 1 pixel white image.

.inner
{
  background:url(white.gif);
}

Case of an image

In the case of an image, the rounded corners are not desirable for the inner frame, so we change the style of the <fieldset> or use a <div> as below:

<fieldset class="wood" style="width:276px">
    <div class="imgback" style="padding:0;height:400px;width:258px" border="0" >
        <img src="images/20.jpg" />
    </div>
</fieldset>

It is necessary to specify the width of the outer frame (wood) and also the size of the inner frame (imgback), this, taking into account the margins.

Demonstration

• Textured border for a text or an image.
• See the style sheet.
• Get the white image.

(c) 2009 Xul.fr
Licence: You are free to use the code of this tutorial to motorize your own site. Please do not put the tutors and other files on another website, add a link to the article instead. But you can print the pages and distribute them along with the code for educational purpose.