Css Border
To display the border in an element appearing in a web page, we use border properties. Border properties are of 4 types.
1 border-style
2 border-width
3 border-radius
4 border-color
1 CSS Border style
The value of Border style property is changed and displayed in different types of border web page. The value used in this property is as follows -
1 dotted border:- webpage has a dotted border display.
2 dashed border:- webpage dashed border display
3 solid border:- webpage has solid border display
4 double border:- webpage double border display
5 groove border:- webpage has groove border display
6 ridge border:- webpage has ridge border display
7 inset border:- webpage has inset border display
8 outset:- border webpage has outset border display
Example 1
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="border-style:dotted">dotted border</p> <p style="border-style:dashed">dashed border</p> <p style="border-style:solid">solid border</p> <p style="border-style:double">double border</p> <p style="border-style:groove">groove border</p> <p style="border-style:ridge">ridge border</p> <p style="border-style:inset">inset border</p> <p style="border-style:outset">outset border</p> </body> </html> |
Output
2 CSS Border width
To increase or decrease the width (width) of the border displayed in the web page, use border width properties. This property can be used with all border styles, its value is given in px, pt, cm etc. Apart from this, we use 3 default values to change the border width in this property, which is as follows -
1. thin
2. medium
3. thick
1 thin - The default width (thickness) of the border is about 1px when using this value.
2 medium - The default width (thickness) of the border is about 3px when using this value.
3 thick - Using this value, the default width (thickness) of the border is about 5px.
Example 2
|
<!DOCTYPE html> <html> <head> <title></title> <style> p.solid{ border-style:solid; } p#dotted{ border-style:dotted; } p.double{ border-style: double; } </style></head> <body> <p class="solid" style="border-width: thin;">thin border</p> <p class="solid" style="border-width: medium;">medium border</p> <p class="solid" style="border-width: thick;">thick border</p> <p class="double" style="border-width: 15px;">15px border</p> <p class="solid" style="border-width: 2px 10px 4px 20px;">2px top,10px right, 4px bottom, 20px left border</p> </body> </html> |
Output
3 CSS Border radius
Border radius properties are used to display the Border displayed in the web page in round shape, its value is given in px, pt, cm etc.
Example 3
|
<!DOCTYPE html> <html> <head><title></title> <style> p{ border: 2px solid red; } </style> </head> <body> <p style="border-radius: 8px;">Round border</p> </body> </html> |
Output
4 CSS Border color
Use this property to change the color of the border displayed in the web page along with the border style property, you can use it with all border style to change the color given hex value, rgba value or color name of the color. It is known that this property cannot be used alone, it is necessary to use border style property with it.
Example
|
<!DOCTYPE html> <html> <head> <style> p{ border-style:solid; } </style> </head> <body> <p style=" border-color: red;">red border</p> <p style=" border-color: red green blue yellow;">red, green, blue, yellow border</p> </body> </html> |
Output
