4

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.

Matthew Gatland
  • 324
  • 3
  • 11
23986294
  • 81
  • 1
  • 1
  • 3
  • 2
    Do you have a reference, example, code you've tried, problem you are having, or a question? – Wesley Murch Jun 13 '11 at 10:42
  • is not really a question, you can give us an example? – red eyes dev Jun 13 '11 at 10:42
  • What exactly do you want? Have you looked at the source for these websites that you mention? Is there an issue with reusing this code in your own design? – BonyT Jun 13 '11 at 10:43
  • 1
    The question is in the title. I didn't think simple questions like this bore repeating. – BoltClock Jun 13 '11 at 10:50
  • 1
    Have you tried different border styles of border-style CSS element? – dotcoder Jun 13 '11 at 10:45
  • @Wesley Murch, @Piskvor, @Nick Berardi, @Neil Knight, @trashgod: Well you guys are certainly quick on the trigger. If you don't read the question or forgot the question after reading the other two sentences, I can't help you (and where did I ever mention a website?). This can't be this site's philosophy. – 23986294 Jun 13 '11 at 12:47
  • @Wesley: GUIs grouping elements are very common and IMO don't need an example. The question is the title. Is anything wrong with it? Surely you just have overlooked it. @red eyes dev: Why do you think this is not a question? Have you read the title? The example: pick any GUI with input widgets. @BonT: Have you read the question? What is not to understand? I don't mention any website, thus I cannot reuse any code. @mohang: no, I did not think to look into that. Thank you. – 23986294 Jun 13 '11 at 12:47
  • My solution: https://codepen.io/Belyash/post/css-border-emboss – Belyash Jan 25 '18 at 10:51

4 Answers4

6

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
3

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.

Tak
  • 11,428
  • 5
  • 29
  • 48
  • Thanks, but I would like to have the box's border embossed, not the box. – 23986294 Jun 13 '11 at 12:07
  • For a code-only solution you can embed many divs inside each other creating a gradient-like border effect. Or use background images as I suggested – Tak Jun 13 '11 at 12:09
0

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.

tsimbalar
  • 5,790
  • 6
  • 37
  • 61
  • 1
    Thanks. While it does not look much better than `border-style:groove;` saves manual styling of a couple of divs. Can be styled with `border-radius`. – 23986294 Jun 13 '11 at 12:25
-2

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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks, I should have looked into that. The style theoretically does what I want, but it does not look real. And it does not render so nicely in Firefox and Chrome (dark rectangle overlayed by light rectangle with slight offset to bottom right). – 23986294 Jun 13 '11 at 12:14
  • Forgot: `groove`. Needs at least a width of `2px` (can width be omitted?). – 23986294 Jun 13 '11 at 12:26