Skip to main content

Flutter Add Rounded Corner Border To Container

Default border style on Container draw border without rounded corners which is sharp corners. To make the container border with rounded corners we have apply BorderRadius.all() property of our Container widget.

Flutter Add Rounded Corner Border To Container:

1. Applying BorderRadius.all() with Radius.circular() function on Container.
Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.green,
              border: Border.all(color: Colors.red, width: 5.4),
              borderRadius: const BorderRadius.all(Radius.circular(24))),
          child: const Text(
            'Container with Rounded Border',
            style: TextStyle(fontSize: 24, color: Colors.white),
            textAlign: TextAlign.center,
          ))
Source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.green,
              border: Border.all(color: Colors.red, width: 5.4),
              borderRadius: const BorderRadius.all(Radius.circular(24))),
          child: const Text(
            'Container with Rounded Border',
            style: TextStyle(fontSize: 24, color: Colors.white),
            textAlign: TextAlign.center,
          )),
    ))));
  }
}
Screenshot:
Flutter Add Rounded Corner Border To Container

Comments