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.
Let's begin...
Border Style
- 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
Border Width
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.
Border Color
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:
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
Border Shortcut
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)
Examples:
border: 2px solid red;
border-left: 3px dotted;
Rounded Borders
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.
