Use case

Problem

Currently, TableBorder requires all outer borders (top, right, bottom, left) to have identical width and color to apply border radius. This creates significant limitations for UI design flexibility.

Developers often need to create tables with:

• Different border widths on different sides (e.g., thicker bottom border)
• Partial borders (e.g., only top and bottom)
• Rounded corners for better visual appearance

The current implementation forces developers to choose between having varied border widths OR having rounded corners, but not both. This makes it difficult to create modern, visually appealing table designs that follow design system guidelines.

Expected Behavior

TableBorder should support border radius even when outer borders have different widths, as long as they share the same color.

Example code:

TableBorder(
  top: BorderSide(color: Colors.blue, width: 3.0),
  right: BorderSide(color: Colors.blue, width: 1.0),  // Different width
  bottom: BorderSide(color: Colors.blue, width: 2.0), // Different width
  left: BorderSide.none,                              // No border
  horizontalInside: BorderSide(color: Colors.red),    // Different color OK
  verticalInside: BorderSide(color: Colors.red),      // Different color OK
  borderRadius: BorderRadius.circular(8),             // Currently doesn't work
)

Proposal

Proposed Solution

The TableBorder implementation should be enhanced to detect cases where the outer borders have uniform colors but non-uniform widths. In these scenarios, it should still be possible to apply border radius while maintaining the individual border widths.

This would improve consistency with how Border class works and provide developers with more flexibility when styling tables, without requiring them to compromise on either border width variations or border radius.

Related PR

This issue will be addressed in PR #172441