drivl.

Tech and developer culture humor

Code Tech

How to Make Square Corners with CSS

To remove rounded corners from an element, set its border radius to zero:

.panel {
  border-radius: 0;
}

That is the whole adjustment when the rounding comes from CSS. Choose the selector for the box you actually want to change; a global reset would also flatten buttons and other components.

MDN documents the property and its individual-corner forms. If the rule appears to do nothing, inspect the element to see which declaration is winning. A rounded shape drawn inside an image will not change when its container does.

This URL began as a square-corners joke in 2007. The joke worked because achieving the opposite effect once required considerably more effort.

When a curved box needed extra parts

Corner images

Small graphics supplied the curve, positioned around the box. A change in color or radius could require new assets. The maintenance bill was surprisingly large for a detail that communicated so little.

Sliding doors

Doug Bowman’s Sliding Doors of CSS, published in 2003, used two background images to make a tab stretch with its text. It solved a concrete layout problem using the browser features available.

The technique deserved its reputation. It also meant building a little mechanism so a tab could look like a tab. Changing the label should not feel like testing a garage door.

Nifty Corners

This approach used JavaScript to create the effect without corner-image assets. Its contemporary documentation describes a revealing fallback: disable JavaScript and the corners become square.

These methods made different tradeoffs. The useful comparison was how they behaved when text grew, styles changed or a script failed. A screenshot of the happy path could not answer that.

Two code panes. Before border-radius, a box needed multiple background image declarations across nested elements. After, a single border-radius declaration of 18 pixels.
A simplified comparison of image-based styling and the native radius property.

Choose the shape, then stop working on it

A native border radius makes the curve a small styling decision. It does not settle whether the curve helps the page. That still depends on the design.

Repeated visual conventions can make startup landing pages look alike, but removing the radius will not give generic copy a specific product to explain. Fix the part that is actually causing the problem.

Other interface details carry more information. A loading indicator needs to tell someone whether work is progressing. A decorative corner mostly needs to look intentional and stay out of the way.

If the brief keeps returning to the radius while the page’s purpose remains unsettled, the client commandments offer a more useful conversation. Agree on what the page should do. The corner can wait.