CSS powers modern web design, handling everything from typography to layout. While properties like color, font-size, and margin are everyday tools, several lesser-known properties can solve specific design challenges efficiently. Here are five CSS properties that deserve more attention.

1. text-decoration

Beyond the standard underline, text-decoration accepts multiple parameters for enhenced styling:

• width - the line thickness
• style - such as solid, dotted, or dashed
• color - the line's color

Creating a green double underline on link hover becomes straightforward:

.nav-link:hover {
  text-decoration: underline 2px solid green;
}

This shorthand combines what previously required multiple properties into a single declarasion.

2. text-underline-offset

Letters with descenders (like g, p, y) often have they underlines obscured. The text-underline-offset property controls the gap between text and its underline.

Adjusting the underline distance to 6 pixels on hover:

.nav-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}

This property is particularly useful for improving readability in dense text or navigation menus.

3. Inset Shorthand

When positioning elements with absolute or fixed positioning, setting offsets for all four sides traditionally requires four separate declarations. The inset property consolidates these:

/* Traditional approach */
top: 5px;
right: 3px;
bottom: 1px;
left: 4px;

/* Condensed version */
inset: 5px 3px 1px 4px;

The order follows the standard box-model convention: top, right, bottom, left.

4. object-position

The object-fit: cover property ensures images fill their containers without distortion, but it offers no control over which portion gets cropped. The object-position property solves this by specifying the focal point.

Aligning an image to the bottom of its container:

.hero-image {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: bottom;
}

Available Values

Keyword values:

• top / bottom / left / right - aligns edges
• center - centers the content
• Combinations like top right, center bottom - positions corners and edges

Numeric values:

• Percentages: object-position: 25% 50% positions horizontally at 25% and vertically at 50%
• Pixel units: object-position: 0px 100px sets specific offsets from left and top edges

Practical examples:

.card-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

/* Focus on left side of image */
.card-image.left-focus {
  object-position: left;
}

/* Focus on specific percentage point */
.card-image.partial {
  object-position: 25% 0;
}

This is invaluable for hero images, profile pictures, and any situation where the subject matters more than showing the entire photograph.

5. scroll-margin-top

When using anchor links, browsers scroll elements to the viewport's top by default. Adding a sticky header creates a problem—the anchored content gets hidden underneath. The scroll-margin-top property reserves space during scroll-into-view calculations.

Reserving 100 pixels above the target element:

#destination-section {
  scroll-margin-top: 100px;
}

This works perfectly with sticky navigation bars, fixed headers, or any overlapping element that would otherwise obscure anchored content.