Borders and Rounded Corners in Flutter: Containers and Images

Adding a border or rounded corners in Flutter goes through BoxDecoration for a Container — but an Image widget needs a different approach entirely, since it has no decoration property of its own to round its corners with.

A basic border on a Container

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 2),
  ),
  padding: const EdgeInsets.all(16),
  child: const Text('Bordered box'),
)

Rounded corners on a Container

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 2),
    borderRadius: BorderRadius.circular(12),
  ),
  padding: const EdgeInsets.all(16),
  child: const Text('Rounded bordered box'),
)

Rounding only specific corners

Container(
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
    color: Colors.blue,
  ),
)

BorderRadius.only() allows rounding just some corners independently — genuinely useful for a card-style header that should be flat on the bottom where it meets the rest of the card's content.

A border on just one side of a Container

Container(
  decoration: const BoxDecoration(
    border: Border(
      bottom: BorderSide(color: Colors.grey, width: 1),
    ),
  ),
  padding: const EdgeInsets.all(12),
  child: const Text('Item with a bottom divider border'),
)

Border()'s named constructor, rather than Border.all(), is what allows specifying just one or a few sides independently — useful for a list-item-style bottom divider without adding borders to the other three sides.

Rounding the corners of an Image, using ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.network(
    'https://example.com/photo.jpg',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

Since Image has no decoration property to add rounding to directly, wrapping it in ClipRRect is the standard approach — it clips its child to a rounded-rectangle shape, working for any widget, not just images specifically.

A fully circular image (avatar-style)

ClipOval(
  child: Image.network(
    'https://example.com/avatar.jpg',
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
)

ClipOval clips to a full ellipse rather than a rounded rectangle — for a square-sized image, this produces a perfect circle, the standard pattern for a user avatar.

Combining a border and rounded corners on an image together

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    border: Border.all(color: Colors.white, width: 3),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(13), // slightly smaller than the outer radius
    child: Image.network('https://example.com/photo.jpg', fit: BoxFit.cover),
  ),
)

Nesting a ClipRRect inside a bordered Container, with a slightly smaller inner radius than the outer one, is what achieves a bordered rounded image cleanly — using just ClipRRect alone provides no way to also draw a border around the clipped content.