How To Draw a Line With CSS Tutorial (Horizontal or Vertical)

In this CSS tutorial, we'll look at how to draw a line with CSS - either a horizontal or vertical line. --- Blog: https://pennedweb.com --- So there is no CSS property or HTML element that allows us to just insert a line to separate content (well, there is one element which we discuss towards the end of the tutorial). What you need to do is just create an empty element, that is, one that has no width (vertical line) or no height (horizontal line) and then setup a border either on the bottom (horizontal line) or on one of the sides (vertical line). By using the CSS border property you can specify the thickness, style and colour of the line. So this video is quite trivial really but it's a good chance to explore the CSS display property and make a differentiation between block elements and inline elements. Also, it's good to see a way that you can use HTML elements combined with CSS rules to create visual effects that you might not have thought about. For example, the dividers or separators created in this way would normally have been achieved by using image files or possibly SVGs. So although simple, I hope you enjoy this CSS tutorial from Junior Developer Central and that it gives you some insight in to the CSS display property and also some ideas for separating your content using CSS.