 |
VOOZH | about |
|
VOOZH | about |
The borderproperty is used to create a border around an element and defines how it should look. There are three properties of the border.
border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following values are allowed.
Example: Here is a basic example of border-style property.
Output:
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;
Example:
Output:
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.
Example: Here is an example of the above-explained property.
Output :
border-color property: 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.
Syntax:
border-color : green; border-top-color: black; border-bottom-color: yellow;
Example: Here we are using the above method.
Output:
Border Shorthand: We can define all the above properties in a single property, border.
Syntax :
border: (border-width) (border-style) (border-color);
border: 5px dotted red;
Example: In this example, we are using the above method.
Output:
Rounded borders: The border-radius property is used to add rounded borders. Change the above HTML code with the following syntax.
Syntax:
border: 5px solid red; border-radius : 15px;
Example: Here we are using the above-explained method.
Output:
