In the last article, we learned about all the ways in which we can customise backgrounds in our web pages using CSS.
Now in this article, we are going to learn about the use of Border in CSS.
The border-style Property specifies the kind or style of the border. Following values can be used:
- dotted: Defines a dotted border
- dashed: Defines a dashed border
- solid: Defines a solid border
- double: Defines a double border
- groove: 3D grooved border
- ridge: 3D ridge border
- inset: 3D inset border
- outset: 3D outset border
- none: No border
- hidden: Hidden border
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
It can be mentioned in px, pt, cm, em or any valid specific size unit.
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
It can be mentioned in any valid color format we have learned.
Note: If you do not want to write properties of different sides side by side in given order, you can also write as follows:
The border property is a shorthand property for the following individual border properties:
- border-width (optional)
- border-style (required)
- border-color (optional)
(Order is not important)
border: 2px solid red;
border-left: 3px dotted;
You can have rounded corners by using border-radius property.
It can have any value in px, pt, cm, em or any specified size unit.
That's all for today. In the next article, we are going to learn about margins and paddings. We will study their actual difference so that you will never confuse one with the other.
Till then #keepCoding.