flutter
/

Flutter Border Radius – Complete Guide with Examples

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

Flutter Border Radius – Complete Guide with Examples

What is BorderRadius?

BorderRadius is a class in Flutter that defines the rounding of corners of a rectangle. It is used with BoxDecoration, ShapeDecoration, ClipRRect, RoundedRectangleBorder, and other widgets that accept a BorderRadiusGeometry. Understanding how to round corners is essential for creating modern, visually appealing UI designs, such as cards, buttons, images, and dialogs.

BorderRadius.circular – Uniform Rounding

The simplest way to create rounded corners is BorderRadius.circular(radius). It applies the same radius to all four corners.

DARTRead-only
1
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20.0),
  ),
)

BorderRadius.only – Custom Corner Rounding

Use BorderRadius.only when you need different radii for different corners. The topLeft, topRight, bottomLeft, bottomRight parameters take Radius objects.

DARTRead-only
1
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(40),
      bottomLeft: Radius.circular(0),
      bottomRight: Radius.circular(60),
    ),
  ),
)

BorderRadius.vertical and BorderRadius.horizontal

For rounding only the top or bottom corners, use BorderRadius.vertical. Similarly, BorderRadius.horizontal rounds the left or right corners.

DARTRead-only
1
// Rounds only top corners
BorderRadius.vertical(top: Radius.circular(20));

// Rounds only bottom corners
BorderRadius.vertical(bottom: Radius.circular(20));

// Rounds only left corners
BorderRadius.horizontal(left: Radius.circular(20));

// Rounds only right corners
BorderRadius.horizontal(right: Radius.circular(20));

Applying BorderRadius to Different Widgets

BorderRadius is not limited to Container. You can use it with:

    • Card: The shape property accepts a RoundedRectangleBorder with borderRadius.
    • ClipRRect: Rounds the corners of any child widget (e.g., images).
    • Image: Wrap with ClipRRect to round image corners.
    • Button: Use ElevatedButton.styleFrom with shape (requires a RoundedRectangleBorder).
    • Dialog: Use shape property of AlertDialog or Dialog.
    • ExpansionTile, etc.
DARTRead-only
1
// Rounded Card
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  child: ...
)

// Rounded Image
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network('https://example.com/image.jpg'),
)

// Rounded Button
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30),
    ),
  ),
  onPressed: () {},
  child: Text('Rounded Button'),
)

Advanced: Using Radius with Circle

Radius can also be created with Radius.elliptical(x, y) for non‑uniform radii. This is useful for more complex shapes, but usually Radius.circular is sufficient.

DARTRead-only
1
BorderRadius.only(
  topLeft: Radius.elliptical(20, 10),
  bottomRight: Radius.elliptical(30, 15),
)

Common Mistakes

    • Using BorderRadius directly on ClipRRect: ClipRRect expects a BorderRadiusGeometry, which BorderRadius implements. That's fine. But forgetting to set clipBehavior to Clip.antiAlias can result in jagged edges.
    • Applying BorderRadius to a Container without BoxDecoration: The borderRadius property only exists inside BoxDecoration. You cannot set borderRadius directly on a Container.
    • Mixing BorderRadius.circular with Radius: BorderRadius.circular accepts a double, while BorderRadius.only requires Radius objects. They are different; don't mix them incorrectly.
    • Using too large radii: A radius larger than half the width/height will produce a pill shape; be intentional about your design.
    • Forgetting to use ClipRRect for images: Image does not have a built‑in borderRadius; you must wrap it with ClipRRect or use Container with decoration.

Best Practices

    • For consistent design, define a constant for the corner radius (e.g., const kBorderRadius = 12.0).
    • Use ClipRRect for clipping images; combine with Image.network for smooth corners.
    • For interactive widgets (buttons, cards), ensure the radius is consistent with the Material Design guidelines (e.g., buttons often use 30dp radius).
    • When creating custom shapes, prefer RoundedRectangleBorder over directly applying a BorderRadius to a ClipPath unless you need irregular shapes.

Key Takeaways

    • BorderRadius.circular rounds all corners equally.
    • BorderRadius.only lets you set different radii per corner.
    • BorderRadius.vertical / horizontal round top/bottom or left/right corners.
    • Apply to Container via BoxDecoration, to Card via shape, to images via ClipRRect, and to buttons via ElevatedButton.styleFrom.
    • Use Radius.elliptical for non‑circular rounding.
    • Always test on different screen sizes to avoid unexpected clipping.

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BorderRadius Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Center(child: Text('Container')),
              ),
              SizedBox(height: 20),
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    bottomRight: Radius.circular(30),
                  ),
                ),
                child: Container(
                  width: 150,
                  height: 100,
                  child: Center(child: Text('Card')),
                ),
              ),
              SizedBox(height: 20),
              ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: Image.network(
                  'https://picsum.photos/150/150',
                  width: 150,
                  height: 150,
                  fit: BoxFit.cover,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 4

Which method creates a BorderRadius with all corners rounded equally?

A
BorderRadius.all
B
BorderRadius.every
C
BorderRadius.circular
D
BorderRadius.uniform
Q2
of 4

How do you apply a BorderRadius to a Container?

A
Container(borderRadius: ...)
B
Container(decoration: BoxDecoration(borderRadius: ...))
C
Container(shape: ...)
D
Container.clip: ...
Q3
of 4

Which widget would you use to round the corners of an image?

A
Container
B
ClipRRect
C
Image.borderRadius
D
RoundedImage
Q4
of 4

What does `BorderRadius.vertical(top: Radius.circular(10))` do?

A
Rounds only the top‑left corner
B
Rounds only the top‑right corner
C
Rounds both top corners
D
Rounds all corners

Frequently Asked Questions

How do I round only the top corners?

Use BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)). Alternatively, BorderRadius.vertical(top: Radius.circular(20)).

Can I use BorderRadius with a Container that has a border?

Yes, include both border and borderRadius in the BoxDecoration. The border will follow the rounded shape.

What is the difference between `BorderRadius.circular(20)` and `Radius.circular(20)`?

BorderRadius.circular(20) creates a BorderRadius object where all corners have a circular radius of 20. Radius.circular(20) creates a Radius object that can be used for a single corner. They are not interchangeable; BorderRadius is a collection of four radii.

How do I make a circular image?

Use ClipOval or set borderRadius: BorderRadius.circular(1000) on a ClipRRect with the image. For a perfect circle, make the image dimensions equal and the radius half the size. Or use CircleAvatar which automatically clips to a circle.

Does BorderRadius work on Flutter Web?

Yes, it works on all platforms. The rounding is applied via CSS borders under the hood on web, but the API is consistent.

Previous

flutter decoration

Next

flutter gradient

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.