Geek asks and answers

How to create embossed borders using HTML and CSS?

Some graphical interfaces use fields with embossed borders to group widgets.

How do I create this image using HTML and CSS?

The embossed border creates the illusion that the element leaves the page in 3D. It is often created by making the upper and left border lighter, and the lower and right border darker.

+3
source share
4 answers

Most of the GUIs that I see use a CSS-like style border-style: groovefor group fields.

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

+5
source

, .

- / ( ):

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

- , . . All-Expandable Box .

CSS3 , .

, jQuery , jQuery UI pack /.

+2

, <fieldset>.

.

.

.

0

border-style, "", "" "", , , .

-2
source

More articles:


All Articles