CSS3 User Interface

Advanced CSS User Interface Features

Explore CSS features that enhance user interaction and control element sizing.

Controlling Box Sizing: box-sizing

The box-sizing property changes how the total width and height of an element are calculated.

• content-box (default): The width and height properties apply only to the content area. Padding and border are added outside this width/height, making the element visually larger than specified.
• border-box: The width and height properties include the content, padding, and border. This makes it much easier to size elements predictably, as adding padding or border won’t change the element’s overall dimensions.

Best Practice: It’s highly recommended to apply box-sizing: border-box; globally for more intuitive layout management:

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* Inherit from html element */
}

This approach makes sizing elements much simpler, as width: 200px; means the element will be 200px wide visually, regardless of its padding or border.

Element Resizing: resize

The resize property allows the user to resize an element. For it to work, the element usually needs its overflow property set to something other than visible (e.g., auto, scroll, hidden).

Common values:

• none (default): The element is not resizable.
• both: The user can resize both the height and width.
• horizontal: The user can only resize the width.
• vertical: The user can only resize the height.

This property is most commonly seen on <textarea> elements by default, but can be applied to other elements like <div>.

/* Make a div horizontally resizable */
.resizable-box {
  border: 1px solid #ccc;
  padding: 1em;
  width: 300px;
  height: 150px;
  overflow: auto; /* Required for resize to work */
  resize: horizontal;
}

Note: Browser support for applying resize to arbitrary elements is good in modern browsers, but check compatibility if supporting older ones.

Outline Offset: outline-offset

The outline property draws a line around an element, outside its border edge. Unlike border, outline does not take up space and therefore doesn’t affect layout. It’s often used for accessibility focus indicators.

The outline-offset property adds space between the outline and the element’s border edge.

.highlight-focus:focus {
  /* Default browser outline can be inconsistent */
  outline: none;
  /* Custom outline with offset */
  outline: 2px solid blue;
  outline-offset: 3px; /* Adds 3px space */
}

This provides visual separation between the element and its focus indicator, which can improve clarity.

Other UI Related Properties (Less Common / Experimental)

The original tutorial mentioned nav-* properties (nav-down, nav-left, etc.). These were part of an early specification for directional navigation (e.g., for TV remote controls) but have very limited browser support and are generally not used in standard web development. Focus on the widely supported properties covered above.

Key UI Properties Summary

Property	Description
box-sizing	Controls how width/height are calculated (includes padding/border).
resize	Specifies whether an element is user-resizable.
outline	Draws a line around an element (outside the border, no layout impact).
outline-offset	Adds space between the outline and the element’s border edge.
cursor	Specifies the mouse cursor to display when hovering over an element.

Consult MDN Web Docs for the latest details on CSS properties and browser compatibility.