♦ CSS Border
♣ About CSS Border
Border is a surrounding element of HTML element.Borders surrounding the text, image, video, tag can be customized by CSS.
♣ Border Styles in CSS
There are various styles that can be defined for border.| Border Name | Display |
|---|---|
| dotted | . |
| dashed | . |
| solid | . |
| double | . |
| groove | . |
| ridge | . |
| inset | . |
| outset | . |
| none | . |
| hidden |
♣ Example1: Border Width in CSS
Width of Border can be customized in CSS.In this example, various Border Width are illustrated.
Example
Input: Varied Sized Borders
Output:
♣ Example2: Border Color in CSS
Border can be easily colored.Methods such as color names, rgb, hex, hsl can be used for coloring the border.
Below is the representation of Boder Color Syntax.
Basic Syntax
border-color : color_code ;
Syntax Explanation:
color_code : color of the border
In this example, Border Colors are illustrated. Example
Input: red, green, blue border demonstration
Output:
♣ Example3: Rounded Border in CSS
Borders can be curved at corners to give smooth finishing. Example
Input: Range of Borders with different radius.
Output: