CSS Lesson 12: Border

0
18

CSS Borders

After learning the margin, let’s move on to the Borders. Usually, in previous chapters, we start from the related properties and then move to the Shorthand property, but here we’ll start from the Shorthand trick. WHY? Because the CSS Border property has only three properties: style, width and color. Out of which ”style” is mandatory. So it’s best to use them combined.

  • border-width
  • border-style (mandatory)
  • border-color

Here is the syntax of border Shorthand

Where 1px is border-width, solid is border-style and black is border-color.

Easy! Isn’t it? You’re a very attentive student, so we’re sure you have understood it completely. If not, don’t worry, we’ll teach you every CSS Border property separately!

Border-width

CSS border width defines the thickness of the border line. The greater the value, the thicker the border will be. It can be defined in pixels (px) or in predefined values i.e. thin, medium and thick. However, it’s recommended to use the pixels. WHY? Because it give you more customize control and you can modify the value very easily.

Source Code Output

This is the CSS border-width example. The border is solid with 2 pixel width

[tooltip]Note:As mentioned earlier, border-style is a must in CSS Border property. That’s why, we put it in the style property. Just ask yourself, without border-style, how can you define the width? Right? [/tooltip]

Border-Color

Color has an interesting place in CSS. You can fix it with any property. Throughout the CSS the Colors will be defined in three formats: RGB color, Hex code and Names. Let’s use color property with our borders.

Source Code Output

This border has lime color.

Border-style

CSS border-style defines the appearance of a border. The following are the possible border values and their explanations.

  • Solid – A solid border is the complete line in normal width.
  • Dotted – As the name suggests, this border property gives you a dotted border (duh!)
  • Dashed – This border value will appear in small dashes (-).
  • Double – A double border gives you two solid borders having same width.
  • Grove – This border works perfectly with the border-color property.
  • Ridge – This property gives you a 3D Ridge border.
  • Inset – Inset property draws on inside border. It gives you a 3D view.
  • Outset – Outset property is the opposite of Inset property. It draws on the outside border and gives you a 3D view.
  • Hidden – Hidden property is the best to hide the border (shh!).

Above are all values of the border-style property.

Source Code Output

This is solid border

This is dotted border.

This is dashed border.

This is double border.

This is groove border.

This is ridge border.

This is inset border.

This is out set border.

This is hidden border.

Different border for different side

Did you know you can set different borders for different side? Let’s reveal an interesting usage of a border. As you know, a border has four different sides: top, right, bottom and left. What if we put a different border value on each side? Sounds kind of fun, right? So here’s the demonstration of it:

Source Code Output

This text has different border for different side. Left and right side is solid, top side is dotted and bottom is dashed.

Border Shorthand of different sides

You might be thinking, is there any way to define different border styles in a Shorthand property? The answer is YES. You learned in the previous lesson how to define all sides as a one property. However, the sequence of sides will be same top, right, bottom and left. Following are four different formats of ”border-style” shorthand property, but they also work with the ”border-color” and ”border-width” property:

border-style: dotted solid dashed solid;
top border is dotted
right border is solid
bottom border is dashed
Left border is solid

border-style: dotted solid dashed;
top border is dotted
right and left border is solid
bottom border is dashed

border-style: dotted solid;
top and bottom border is dotted
right and left border is solid

border-style: solid;
All borders are solid

Summary

  • CSS Borders have style, width and color property.
  • Border-style is mandatory property.
  • Define border thickness with border-width property.
  • Use border-color to define color of border.

Next Lesson

In the next lesson we’ll move toward another section of the Box Model which is Padding. Let’s get started!

Leave a Reply