CSS Border Properties
CSS Border properties are used to decorate the border style, color, size of an element. the border properties in CSS specifying the width, style of the border area of the box, and color.
border properties applied on borders of a box-like shape, such as border-radius, box-shadow, and border-image.
the general form used which used to set the border around an element using CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style type="text/css"> .border-line{ float: left; font-size: 18px; padding: 25px; border: 7px solid #ccc; } </style> </head> <body> <div class="border-line"> <p style="width:70%">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </body> </html> |
CSS Syntax border-style values
|
1 |
border-style: none|initial|inherit|solid|dotted|dashed|double|groove|ridge|inset|outset|hidden|; |
| Value | Discription |
|---|---|
| none | its default border value means Define no border |
| initial | initial value used for border style effect. |
| inherit | inherit border-style value used for border style effect properties. |
| solid | its Define as Solid Border, its value decorate the border style as solid |
| dotted | the dotted value is used when you want to decorate the border style as dotted |
| dashed | it’s defined as a dashed border, it also used to decorate the border style |
| double | its define as double border style, use to decorate the border style of the element |
| groove | Border properties value groove depends on the border-color value, it shows 3D effects inside the border. different color gives different effect inside the border. |
| ridge | Ride border-style value also depends on border-color, 3D effects shows inside the border. |
| inset | when you use inset value for border-style, the 3D effect depends on border-style color, different color gives different impact inside the border. |
| outset | The outset border-style value shows the 3D effect outside the border, its border style effect depends on color value, 3D-effect results show on outside the border. |
| hidden | its border style value used for the hidden border. |
CSS Border-style Properties
First column |
Second column |
Third column |
|---|---|---|
| border | border-color | border-left |
| border-left-color | border-left-style | border-left-width |
| border-bottom | border-bottom-color | border-bottom-style |
| border-bottom-width | border-radius | border-right |
| border-right-color | border-right-style | border-right-width |
| border-width | border-top-width | border-top-style |
| border-top-color | border-top | border-style |
About Author
