Add a border to flutter widget and customization
Tags: flutter, dart, programming, mobile
Published: 2020-02-01 05:32:00

---
title: Add a border to flutter widget and customization
published: true
description: Border in Flutter and customization
tags: flutter, dart, programming, mobile
cover_image: https://mightytechno.com/wp-content/uploads/2020/01/flutter-border.png
canonical_url: https://mightytechno.com/flutter-border/
---

Adding border and customization is easy in Flutter because of BoxDecoration widget provided by flutter. In this article, I will demonstrate how to add a different border to the container using BoxDecoration widget


#Add a simple border with colour
you can set decoration border property to set the color of the border.

```dart
       Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blueAccent)
                ),
                child: Text('Simple Border'),
              ),
    
```
![Flutter border](https://i.ibb.co/XyJgpjH/1-1.png)


#Change width of the border
All factory method in Border class have width property to set the width of the border

```dart
      Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blueAccent,width: 10)
                ),
                child: Text('Simple Border'),
              )
    
```

![Flutter border width](https://mightytechno.com/wp-content/uploads/2020/01/2.png)


#Add different borders for each side
You can use Border class instead of all factory method to set a different border to each side in the widget.


```dart
      Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  border: Border(
                    top: BorderSide(
                      width: 10,
                      color: Colors.amber
                    ),
                    bottom: BorderSide(
                      color: Colors.blue
                    )
                  )
                ),
                child: Text('Simple Border'),
              )
    
```

![Flutter different borders](https://i.ibb.co/VVzycZS/Flutter-different-borders.png)


#Round corner border/ Border radius

You can set borderRadius property in BoxDecoration class to give radius to the borders. You can specify the same radius for all the corners or different radius for each corner

###Equal radius for all corners

```dart
      Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.blueAccent,width: 2)
                ),
                child: Text('Simple Border'),
              )
    
```
![Flutter Border radius](https://i.ibb.co/TrT3FwM/Flutter-Border-radius.png)


###Different radius to each corners

```dart
      Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(10),bottomRight: Radius.circular(10)),
                  border: Border.all(color: Colors.blueAccent,width: 2)
                ),
                child: Text('Simple Border'),
              )
    
```
![Flutter Border radius](https://i.ibb.co/vZST6RG/Flutter-Border-radius-2.png)


##Conclusion

I hope you get an idea of how to add border and customize that based on your need.


Originally published at [mightytechno](https://mightytechno.com/flutter-border/)

Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://twitter.com/mightytechno)