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

StackOverflow https://stackoverflow.com/questions/6329352

  •  27-10-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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.

OTHER TIPS

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.

You may want to have a look at the <fieldset> tag.

Definition and Usage

The tag is used to logically group together elements in a form.

The tag draws a box around the related form elements.

The tag defines a caption for the fieldset element.

One of the various border-style value other than "solid", "dotted" and "dashed" will probably give you what you want.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top