In this tutorial, we’ll learn how to easily implement Flutter textformfield border radius by using a proper practical Flutter code examples.
Outline
- Introduction: Flutter Textformfield Border Radius
- Default Flutter Textformfield Border Radius
- Change Flutter Textformfield Border Radius
- Circular Flutter Textformfield Border Radius(All Edges Same Value)
- Circular Flutter Textformfield Border Radius(All Edges Different Value)
- Custom Flutter Textformfield Border Radius Source Code
- Conclusion
Introduction: Flutter Textformfield Border Radius
Flutter textformfield border radius is used to decorate the border of Flutter textformfield. For instance, if you want to make the Flutter textformfield border rounded then you can achieve it through the customization of Flutter textformfield border radius. You can make some or all of the border radius for textformfield Flutter circular or let them remain sharped.
Don’t worry, I will explain Flutter textformfield border radius in Flutter using proper code implementation so you can have a better idea of how Flutter textformfield border radius works.
Default Flutter Textformfield Border Radius
Let’s implement a simple Flutter textformfield with a border so we can see the default Flutter textformfield border radius decoration. See below code:
TextFormField( decoration:InputDecoration( enabledBorder: OutlineInputBorder() ), )

Change Flutter Textformfield Border Radius
Let’s now change the Flutter textformfield border radius. For that, we’ll be using different methods to customize the radius of Flutter textformfield border.
Circular Flutter Textformfield Border Radius(All Edges Same Value)
If you want to make each and every edge of Flutter textformfield circular and all of the same value, then use the below code:
enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20))

enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(30) .copyWith(bottomRight: Radius.circular(0)))

Circular Flutter Textformfield Border Radius(All Edges Different Value)
If you want to provide each edge of Flutter textformfield with different value, then use the below code:
enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(0), topRight: Radius.circular(40), bottomLeft: Radius.circular(40), bottomRight: Radius.circular(0), ))

Custom Flutter Textformfield Border Radius Source Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Homepage(), ); } } class Homepage extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child: Padding( padding: EdgeInsets.symmetric(horizontal: 40), child: TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(0), topRight: Radius.circular(40), bottomLeft: Radius.circular(40), bottomRight: Radius.circular(0), ), borderSide: BorderSide(color: Colors.blue))), ))), )); } }
Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield border radius. I’ll be delighted to receive your feedback on this post.
I’d love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
How To Change Flutter Textformfield Enabled Border Width [Easy Flutter Guide]
How To Easily Set Flutter Appbar Center Text
How To Use Flutter Textfield AutoFocus [Easy Flutter Guide]
Flutter Textfield Border Radius Explained With Example-Best Flutter Guide
How To Set Flutter Carousel Slider Duration [Easy Flutter Code Examples]
How To Change Flutter Textformfield Cursor Height – Easy Flutter Code Example