![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/63c825354ac9c5a2dcbf6c66_line-l.png)
Overview
Sometimes you just want to create a simple line in Webflow. This shouldn't be rocket science. In less than 2 minutes you can create a line that will be useful in places like dividers, navigation items, and many other places.
We are going to create a line that could be reused in many places.
Step 1 - Add a div block
Add a div block and give it a class "line" so you can re-use it as many times as you want.
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191d813ea8005791f5f00fb_Screen%20Shot%202021-11-14%20at%2020.02.03.png)
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191d8312d68bb723ebec0bb_Screen%20Shot%202021-11-14%20at%2020.06.20.png)
Step 2 - Style the line
Once you have your line in place, you can then style it as much as you want. You can change things like:
Background:
- Color
- Image
- Etc..
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191f30f35ce0a0d56f7cc93_Screen%20Shot%202021-11-14%20at%2023.40.34.png)
Size:
- Width
- Height
- Etc...
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191f2135227a1e7a29a8b6c_Screen%20Shot%202021-11-14%20at%2023.36.12.png)
Borders:
- Corner radius (change one or all of the corners)
- Border
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191d8b9d6736d195cc8f97a_Screen%20Shot%202021-11-14%20at%2020.07.45.png)
Final product
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191f21f5227a1138e9a8b70_Screen%20Shot%202021-11-14%20at%2023.35.51.png)
Extra. Add effects
If you want to get even more creative you can change things like:
- Opacity
- Box shadows
- 2d & 3d transforms
- Transitions
- Filters
![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/6191d8c238f8dbf1915c738b_Screen%20Shot%202021-11-14%20at%2020.07.58.png)