How to make border radius smooth and circular in Flutter

Question

I am trying to understand the underlying concept in button shape styling.

For example BorderRadius.circular(12) and BorderRadius.all(Radius.circular(12)) Here is the image

Both seem do the same thing and yet there are two options. Am I missing something. I am working on this tool vidution.com.

I am trying to make these 8 edges smoother and circular but these edges are sharp . How can I do that with elevated button.

Here is the sample code

class ButtonBorderRadius extends StatefulWidget {
  const ButtonBorderRadius({super.key});

  @override
  State<ButtonBorderRadius> createState() => _ButtonBorderRadiusState();
}

class _ButtonBorderRadiusState extends State<ButtonBorderRadius> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Interactive Viewer Example'), centerTitle: true),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(12)),
              ),
              child: const Text('Beveled Rectangle Border -> Radius Circular'),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                shape: const BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
              ),
              child: const Text('Beveled Rectangle Border -> Radius All Circular'),
            ),
          ],
        ),
      ),
    );
  }
}