Skip to content

[css-forms-1] Apply border-radius to all base appearance controls #14308

Description

@fantasai

A survey of design systems shows that a vast majority round the corners of their input controls to make them not-sharp: usually by 4px, sometimes by 6px. We propose adopting this general consensus by adding border-radius: 4px to the base appearance for input, textarea, select and ::picker.

input, textarea, select, ::picker(...) {
  border-radius: 4px;
}

There is also the question of what to do for buttons, if they should change to match this radius or continue to have a different, more pronounced radius. But there was more variation on this point, so that can be a separate discussion if we want.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions