How do I create embossed borders using HTML and CSS?

html css border emboss
23986294 picture 23986294 · Jun 13, 2011 · Viewed 26.8k times · Source

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

BoltClock picture BoltClock · Jun 13, 2011

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.

Related questions

Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More
How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

Read More