Introduction

Mobile Safari applies platform-specific control styling to form elements, and one visible effect is rounded corners on buttons and button-like inputs. If your design needs square corners or a fully custom button style, you usually have to override the browser's native appearance first, then set your own border radius explicitly.

Why Safari Does This

On iOS, Safari tries to make form controls look like native touch-friendly controls. That means input elements such as these may receive browser chrome you did not ask for:

• 'input[type="button"]'
• 'input[type="submit"]'
• 'input[type="reset"]'
• 'button'

A plain border-radius: 0 is sometimes not enough because the browser's platform appearance may still be active.

The Core CSS Reset

The usual fix is to remove the default appearance and then define your own shape.

1input[type="button"],
2input[type="submit"],
3input[type="reset"],
4button {
5  -webkit-appearance: none;
6  appearance: none;
7  border-radius: 0;
8}

This does two important things:

• '-webkit-appearance: none disables the default iOS control styling'
• 'border-radius: 0 explicitly sets square corners'

If you stop at border-radius: 0 only, Safari may still draw the control using its default appearance rules.

A More Complete Button Style

Once native appearance is removed, you often need to restyle the button more fully because the browser is no longer helping with platform defaults.

1input[type="submit"],
2button {
3  -webkit-appearance: none;
4  appearance: none;
5  border-radius: 0;
6  border: 1px solid #222;
7  background: #111;
8  color: #fff;
9  padding: 12px 16px;
10  font: inherit;
11}

This gives you a predictable starting point across browsers instead of mixing your design with leftover platform styling.

Example HTML

1<form>
2  <input type="submit" value="Save" />
3  <button type="button">Cancel</button>
4</form>

With the CSS reset in place, both controls should follow your custom square-corner styling much more consistently.

Test Real Inputs, Not Just Desktop Emulation

Desktop browser emulation helps, but iOS Safari behavior is ultimately best verified on a real device or a faithful simulator. Form controls are one of the places where mobile browsers can diverge from desktop expectations in subtle ways.

If the corners still look rounded, check for:

• another stylesheet reapplying border-radius
• component-library styles loaded later in the cascade
• a box shadow or outline creating the illusion of rounding
• a missing appearance: none rule on the actual control selector

Accessibility Still Matters

When you remove native appearance, you take more responsibility for usability. Make sure the custom button still has:

• clear contrast
• visible pressed or focused states
• adequate padding for touch targets
• legible typography

A fully flattened button that looks perfect in screenshots but loses focus visibility is a regression, not an improvement.

When To Leave The Native Style Alone

Not every design needs to fight the browser here. If your app already follows Apple's look reasonably closely, the native rounded style may actually be the best UX choice. Override it only when design consistency truly matters across your component system.

The right question is not "how do I remove Safari's style" but "should this control be custom-styled at all."

Common Pitfalls

• Setting border-radius: 0 without also removing the native WebKit appearance.
• Styling only button but forgetting input[type="submit"] and similar controls.
• Removing native appearance and forgetting to restyle borders, padding, and focus states.
• Debugging in desktop Safari only and assuming iOS Safari will behave identically.
• Mistaking a shadow, outline, or parent clip effect for actual rounded button corners.

Summary

• Mobile Safari often applies native rounded styling to buttons and button-like inputs.
• The key reset is -webkit-appearance: none plus an explicit border-radius.
• After removing native appearance, restyle the button fully so it still looks intentional and usable.
• Test on a real iOS device or simulator for final verification.
• Keep accessibility in mind when replacing the platform's default control styling.