How do I create embossed borders using HTML and CSS? [closed]

Question

Some GUIs use boxes with embossed borders to group widgets.

How do I create this look with HTML and CSS?

An embossed border is one that creates the illusion that an element comes forward out of the page in 3D. It is often created by making the top and left border lighter and the bottom and right border darker.

Answer 1

Most GUIs I see use a style similar to CSS's border-style: groove for group boxes.

If you need to use a group box for your HTML forms, use <fieldset> with <legend> for the group label.

Answer 2

There's quite a few methods, especially with modern browsers.

The simplest is light/dark borders (increase pixels for a chunkier look):

.box {
  border-top: #ccc 1px solid;
  border-right: #ccc 1px solid;
  border-bottom: #777 1px solid;
  border-left: #777 1px solid;
}

For anything more complicated then background images can be used on the box. This provides the best browser compatibility. The All-Expandable Box has a good demo.

With CSS3 you can add rounded corners, drop shadows and all sorts of effects.

Also if you're using jQuery elements in widget boxes, then the jQuery UI packs come with some nice skins and easy grouping/boxes.