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.

Textured Border Demonstration

Example with a text:

Demonstration of a message box whose border is a texture.

Various effects may be produced:

  • Tiles.
  • Wood.
  • Metal.
  • etc...

To choose accordingly with the design of the site.

Embedding a title:

Textured Border

Demonstration of a message box whose border is a texture.

Various effects may be produced:

  • Tiles.
  • Wood.
  • Metal.
  • etc...

To choose accordingly with the design of the site.

Example with an image:

Buildings

Code with title:

<fieldset class="wood" style="width:276px">
<span class="ititle">Buildings</span>
<div class="imgback" style="padding:0;height:400px;width:258px" border="0" >
<img src="images/20.jpg" />
</div>
</fieldset>
© 2009-2012 Xul.fr