Welcome back to the 3rd installment of Style Sheet Snacks! The last few weeks, we got an introduction to gradients and learned how to create an easy scrolling element which fades. This week, we’ll talk again about an introduction topic: borders;
When it comes to web development, borders are an element which are used quite frequently. They can show the edge to an element, provide an underline between sections, or a number of other functions. In this section, we are going to give a beginners guide to using borders in CSS.
Basic Border
In its most basic form, a border is likely a solid line that surrounds an element. However, in CSS, the border style will actually take in 3 attributes: border thickness, border style, and border color.
For example, border: 1px solid black; will render something like:
See the Pen ZEzJoKJ by The Datababe (@Thedatababe) on CodePen.
Basic border optinos
In addition to making the border thickness and color customizable, the border pattern also has several other options:
dotteddasheddoublegrooveridgeinsetoutsetnonehidden
See the Pen ZEzJoKJ by The Datababe (@Thedatababe) on CodePen.
Border Radius
Another staple of borders in CSS is the border radius. This becomes valuable when we want to make a shape that is anything besides a rectangle or a square. The border-radius will determine how curved an object is. A border-radius:50% will create a perfect circle.
See the Pen jONLxay by The Datababe (@Thedatababe) on CodePen.
Single Side Border or Border-Radius
The last part of this introduction to borders is creating a border on a single side. This is very much like the way borders work otherwise, but specifies the side. For example border-right:1px solid black would create a border on the right side of the element. Similarly, border-top-right-radius: 10px would create a rounded corner on the top right size of the element.
See the Pen yLBojKo by The Datababe (@Thedatababe) on CodePen.
Conclusion
That’s it for this week! We covered the basics of building borders in css, and gave examples of different styles, shapes, and side specifiers in our code. As always, leave your comments below! Happy Coding!