Skip to content

Why does filled input have rounded top corners but square bottom corners? #17890

Discussion options

You must be logged in to vote

It is following the Material Design definition. So, it's not configurable through props or SCSS variables.
https://m2.material.io/components/text-fields#anatomy

Rounded corners
The container of an outlined text field has rounded corners, while the container of a filled text field has rounded top corners and square bottom corners.

You can use CSS to globally override the styles or give a class to the input fields you want to override.

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@ivanjaros
Comment options

Answer selected by ivanjaros
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants