complete css guide
User interface properties
CSS2 introduced user interface properties, which allow the shape of the cursor to be set based on the object that it is hovering over, and to define the outline of an element. When the cursor is inserted in a field, and keystrokes will be directed to that field, it is said to have the focus. It is usual for some kind of outline to indicate this fact.
CSS2 also introduced a series of color keywords which refer to system values such as the color of window borders. You can learn more about these in the section on color values.
Lastly, CSS2 introduced the system font concept, which allows you to specify fonts based on those used by the system for various kinds of object, such as menu items and the default text for window items. For more on this, see the section on text style properties.
cursor
Browser support
Get browser support information for cursor in the downloadable version of this guide or our browser support tables.
What it does
This property sets the shape of the cursor when the mouse is hovering over a selected element.
Possible values
The cursor
can be specified as either one of several keyword values, or as a URL that points to a file of type .cur
(a cursor resource file).
The possible keyword values for the cursor property, as spelt out in the CSS2 specification are
auto
The browser determines the cursor to display based on the current context.crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).default
The platform-dependent default cursor. Often rendered as an arrow.pointer
The cursor is a pointer that indicates a link.move
Indicates something is to be moved.*-resize
Indicates that the edge is to be moved. * is replaced with N, S, E, W, NE, NW, SE, SW for each of the edges (north, south, east, west and so on).text
Indicates text that may be selected. Often rendered as an I-bar.wait
A cursor to indicate that the program is busy and the user should wait. Often rendered as a watch or hourglass.help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
Default values
The default cursor
value is auto
, which corresponds to the current way in which browsers draw cursors.
Is it inherited?
Child elements inherit the cursor
of their parent elements. Remember, inherited properties can be overridden.
outline
Browser support
Get browser support information for outline in the downloadable version of this guide or our browser support tables.
What it does
This property sets the outline around an element, usually used to indicate that the element has the keyboard focus, that is it will receive keystrokes. Elements do not need to have the focus to have an outline, however, good user interface principles should be followed. As a general rule, users expect the outline to indicate that the outlined element has the focus.
This property is particularly helpful when designing forms for web pages.
Possible values
outline
is a shorthand for three properties described below, outline-style
, outline-width
and outline-color
. It takes a list of width, style and color values (as described for the individual properties below.)
Default values
The default value is the same as for each of the values described below.
Is it inherited?
Child elements do not inherit the outline
of their parent.
outline-color
Browser support
Get browser support information for outline-color in the downloadable version of this guide or our browser support tables.
What it does
outline-color
specifies the color to be used for drawing the outline around an element. Unlike a border, the color of each edge of an outline is the same.
Possible values
outline-color
is specified by a color. We discuss color values in detail in our values section. In addition, the keyword invert
can be used.
invert
inverts each of the pixels in the border. This ensures that an outline is visible regardless of background color.
Default values
If no color is specified for the outline, the outline is invert
, which means the outline will be the inverted color of the background.
Is it inherited?
The outline-color
of an element is not inherited from its parent element.
outline-style
Browser support
Get browser support information for outline-style in the downloadable version of this guide or our browser support tables.
What it does
In addition to width and color, the outline of an element can have a style. There are several possible styles.
Possible values
Outline styles are specified using keywords.
The outline-style
keywords are
none
dotted
dashed
solid
double
groove
ridge
inset
outset
Default values
If no outline-style
property is specified, the style of an outline is none
.
Is it inherited?
Elements do not inherit the outline-style
of their parent elements.
outline-width
Browser support
Get browser support information for outline-width in the downloadable version of this guide or our browser support tables.
Possible values
Outline widths can take either keyword values, or length values.
The keyword values that can be used are
thin
medium
thick
There is no specification for what these keywords mean, so different browsers will probably draw them as different thicknesses. The only guarantee is that thin
is not thicker than medium
which is no thicker than thick
.
Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.
Default values
If no outline-width
is set, the thickness of an outline is medium
.
Is it inherited?
An element does not inherit the outline-width
of its parent element.