How to create and style border using CSS ?
The border property is used to create a border around an element and defines how it should look. There are three properties of the border.
This defines how the border should look like. It can be solid, dashed, offset, etc. The following values are allowed.
- dotted: A dotted border
- dashed: A dashed border
- solid: A solid border
- double: A double border
- groove: A 3D grooved border.
- ridge: A 3D ridged border.
- inset: A 3D inset border.
- outset: A 3D outset border.
- none: A no border style
- hidden: A hidden border.
Similarly, we can use any style from the above-given list based on our choice. We can individually change the style of the bottom, left, right, and top of the border.
Example: In the above HTML code, just change the stylesheet of the border as given below.
border-bottom-style : dashed; border-left-style: solid; border-right-style: double; border-top-style: dotted;
border-width property: This property is used to define the width of all borders. The width can be of any size(in px, pt, cm, em, etc) or by using pre-defined values: thin, medium, or thick.
This property is used to change the color of all four borders. Change or add the following in the above HTML code in the style section.
border-color : green; border-top-color: black; border-bottom-color: yellow;
We can define all the above properties in a single property, border.
border: (border-width) (border-style) (border-color);
border: 5px dotted red;
The border-radius property is used to add rounded borders. Change the above HTML code with the following syntax.
border: 5px solid red; border-radius : 15px;