Today we will review a bit of styling, borders specifically. In today’s world, if you don’t want to style much, you don’t have to. Many styling libraries exist to fit every need you might want. However, maybe you can’t find the exact fit you need or like visually. This is where directly styling becomes useful.
Let’s just add a border to some text! Here is what the code looks like:
Pretty straightforward, what do you expect it will look like?
Again, pretty straightforward, it simply borders the text without anything special going on. It sticks to the exact size in terms of height and width of the text. But what if we need a custom size?
Simply add a height and a width!
With a little more code you can even change the positioning of the text. With a firm understanding of the styling language, you can visually create anything you imagine. Let’s explore a few more border types.
Rounded border
Dotted Border
Dashed Border
Inset Border
Outset Border
With a bit of practice and study, learning the types of borders you can create and how to manipulate them can prove to be invaluable. Frontend and Styling Developers need to particularly practice this skillset because they often work with wireframes sent to them by Designers. Usually, there won’t be any written or code guide that will help you program the wireframes, instead, you’ll only have your eyes and maybe a bit of responsive data.
At the end of the day, it feels very empowering being able to manipulate code visually at will.
Alejandro's blog 