CSS3 User Interface

CSS3 User Interface

In CSS3, some new user interface features have been added to adjust element size, box sizing, and outlines.

In this chapter, you will learn about the following user interface properties:

• resize
• box-sizing
• outline-offset

Browser Support

The numbers in the table indicate the first browser version number that supports the property.

The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version number that supports the prefixed property.

CSS3 Resizing

In CSS3, the resize property specifies whether an element should be resized by the user.

The CSS code is as follows:

Example

The user specifies the size of a div element:

div { resize:both; overflow:auto; }

Try it Yourself »

CSS3 Box Sizing

The box-sizing property allows you to define specific content in an exact way to fit an area.

Example

Specify two side-by-side bordered boxes:

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }

Try it Yourself »

CSS3 outline styling (outline-offset)

The outline-offset property offsets the outline and draws it beyond the border edge.

There are two differences between outlines and borders:

• Outline takes up no space
• Outlines may be non-rectangular

The CSS code is as follows:

Example

Specifies an outline 15 pixels outside the border edge:

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

Try it Yourself »

New user interface features