Border Style 

Basic Border Styles

Window Border Style

Button Border Style

Field Border Style

Status Field Border Style

Grouping Border Style

Basic Border Styles

Windows provides a unified visual design for building visual components based on the border styles shown in the following figure.

Art Image

The following table describes each of these border styles.

Border style Description

Raised outer border

Uses a single line in the button face color for its top and left edges, and the window frame color for its bottom and right edges.

Raised inner border

Uses a single line in the button highlight color for its top and left edges, and the button shadow color for its bottom and right edges.

Sunken outer button border

Uses a single line in the button shadow color for its top and left borders, and the button highlight color for its bottom and right edges.

Sunken inner button border

Uses a single line in the button color for its top and left edges, and the button face color for its bottom and right edges.

If you use standard windows and Windows controls, these border styles are supplied for your application automatically. If you create your own controls, your application should map the colors of those controls to the appropriate system colors so that the controls fit in the overall design of the interface when the user changes the basic system colors.

The DrawEdge function automatically provides these border styles using the correct color settings.

Avoid using fixed widths to define the borders of your own controls. Instead, use the system's GetSystemMetrics function to determine the appropriate thickness of a line. These values are defined appropriately for the resolution of the display.

Window Border Style

The borders of primary and secondary windows, except for pop-up windows, use the window border style. Menus, scroll arrows, and other elements where the background color may vary also use this border style. The border style is composed of the raised outer and raised inner basic border styles, as shown in the following figure.

Art Image

Button Border Style

Command buttons use the button border style. The button border style uses a variation of the basic border styles, where the colors of the top and left outer and inner borders are swapped when combining the borders, as shown in the following figure.

Art Image

The normal button appearance combines the raised outer and raised inner button borders. When the user "presses" the button, the sunken outer and sunken inner button border styles are used, as shown in the following figure.

Art Image

Toolbar button borders differ slightly from command button borders. Toolbar buttons show no visible border unless the user moves the pointer over them. In the button-up state, a toolbar button uses the raised inner border, but uses button highlights for the top and left edges and the button shadow color for the bottom and right edges. In the button-down state, a toolbar button uses the button shadow color for the top and left edges and the button highlight color for the bottom right edges. Unlike command button borders, toolbar buttons do not have a secondary edge border.

Field Border Style

Text boxes, check boxes, drop-down combo boxes, drop-down list boxes, spin boxes, and list boxes use the field border style, as shown in the following figure. You can also use the style to define the work area within a window. It uses the sunken outer and sunken inner basic border styles.

Art Image

For most controls, the interior of the field uses the button highlight color. For text fields, such as text boxes and combo boxes, the interior uses the button face color when the field is read-only or disabled.

Status Field Border Style

Status fields use the status field border style, as shown in the following figure. This style uses only the sunken outer basic border style.

Art Image

You use the status field style in status bars and any other read-only fields where the content of the file can change dynamically.

Grouping Border Style

Group boxes and menu separators use the grouping border style. The style uses the sunken outer and raised inner basic border styles.

Art Image

See Also

Show: