Adding borders and lines to your website design can make your site unique and stand out in the crowd. In this learning CSS tutorial, we are going to learn how to code borders with CSS.
You can add borders to all kinds of elements in your design and it is really cool that you can do this. There are a lot of neat little things we can do with just some simple code and its very easy.
Coding Borders in CSS
We can add Borders (or lines) to any element with CSS. I have so much fun with borders and they can really make you design stand out and be totally unique.
How to Style Borders With CSS
How are we going to style our borders with CSS? We learned in the last tutorial that there are four sides to each element. This will become useful in this tutorial as well, as we will be styling our borders with four sides.
If we want to keep all four sides of our borders the same, then we just use style border:
Or we can do different things to different sides. For example, just having a horizontial line on the bottom. Then just our bottom side is going to have a border, but our top, left, and right will not.
Then we would style border-bottom:
So if we just put border, then we are styling all four sides, but if we wanted to do anything else, to the different sides, we would have to list those sides out. Top, right, bottom and left.
I am going to list four steps we can follow when coding borders in CSS.
Step 1 — Decide which side we are adding the border to. Heres an example:
In this example we are styling the border of the sidebar widget. Styling the sidebar widget can add a “stand out” quality to your sidebar. A lot of people use this in their design as it adds definition to the sidebar. But, some do not. It all depends on what look you are trying to give to your site.
Back to our example, this is not a complete styling of the border, I am just using this to show the first step in the process. So here, we are styling the full border, all four sides.
Step 2 — List what size you want your border to be
As we talked about in the CSS size tutorial, we can use either ems or pics to list size. Lets get going with our example:
You want to list in the code here what size you want. I am going to use 3pix, or pixels. You can see there is no semi-colon yet so we are not finished with this styling yet.
Step 3 — List what style you want your border to be
There are a lot of CSS style line options to choose from:
- Solid = produces a solid line
- Dashed = produces a dashed line
- Dotted = produces a dotted line (with square dots)
- Double = produces a double line
- Groove = produces 3D groove effect
- Ridge = produces a 3D ridge border
The two that I use the most in my designs is the solid and dashed, but feel free to use whichever ones you like.
So in our example below:
I am using a border of 3px and then dashed.
Step 4 — List what color you want your border to be
As we learned about in a previous tutorial, choose the color code (hexidecimal) you want to use for your border.
So now we can finish up our example below:
So now we have finished our border by choosing 3px, dashed, and then the color of #fd6fb7. This completes our styling of the border, and as you can see, we closed it with a semi-colon.
There are some other things that we can do with our borders. We can add drop shadows, rounded corners, but these are more advanced features that I will cover in a later tutorial. I just wanted to get you started with the basics of borders for now.
So thats it for now with borders. As you can see if is real easy to code borders with CSS. It just takes some practise and playing around with the code. You can make your site unique and your own by using borders on different parts of your site.
How will you use borders on your site?
Are you ready to start coding your borders?
In our next tutorial in the series, Learning CSS Code Part 6-Coding Backgrounds with CSS, we will be talking about styling backgrounds with CSS.
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017