**Summary**
I have tried to summarize all the important possibilities when using `border` in `BoxDecoration`.
**Outcomes of the below explained borders:**
[![enter image description here][1]][1]
[![enter image description here][2]][2]
[![enter image description here][3]][3]
[![enter image description here][4]][4]
[![enter image description here][5]][5]
----------
**Explaination**
**Basic**
[![enter image description here][1]][1]
Container(
decoration: BoxDecoration(border: Border.all()),
child: const Text("Text"),
),
___
**BorderColor, width and strokeAlign**
[![enter image description here][2]][2]
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.green,
strokeAlign: BorderSide.strokeAlignCenter)),
child: const Text("Text"),
),
---
**Border only on specific side**
[![enter image description here][3]][3]
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
decoration: const BoxDecoration(
border: Border(top: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 2),
bottom: BorderSide(width: 4))),
child: const Text("Text"),
),
],
),
---
**Different Shapes**
[![enter image description here][4]][4]
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
shape: BoxShape.circle),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(10),
),
child: const Text("Text"),
),
],
),
---
**Curved Border Radius**
[![enter image description here][5]][5]
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(5), right: Radius.circular(20))
),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
bottomRight: Radius.circular(20))),
child: const Text("Text"),
),
],
),
[1]:
[2]:
[3]:
[4]:
[5]: