CSS BORDER
Do you like this story?
common ways of specifying border properties in CSS include the following:
border-style
The border-style property defines the format of the border. The table below shows the possible values and how each one renders.| CSS Declaration | Output |
| p {border-style:solid;} |
Solid Border
|
| p {border-style:dashed;} |
Dashed Border
|
| p {border-style:double;} |
Double Border
|
| p {border-style:dotted;} |
Dotted Border
|
| p {border-style:groove;} |
Groove Border
|
| p {border-style:ridge;} |
Ridge Border
|
| p {border-style:inset;} |
Inset Border
|
| p {border-style:outset;} |
Outset Border
|
border-width
The border-width property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width.| CSS Declaration | Output |
| p {border-width:9px; border-style:solid;} |
Border Width 9px
|
| p {border-width:medium; border-style:dashed;} |
Border Width Medium
|
border-color
The border-color property specifies the color of the border.Examples below:
| CSS Declaration | Output |
| p {border-color:#0000FF; border-style:solid;} |
Border Color Blue
|
| p {border-color:red; border-style:dotted;} |
Border Color Red
|
border-top-, border-left-, border-bottom-, border-right-
Directions (top, left, bottom, right) can be combined with style, width, and color to form a 3-part CSS command. For example, border-top-style specifies the style of the top border. Some examples below:| CSS Declaration | Output |
| p {border-top-style:solid; border-bottom-style:dotted;} |
Sample 1
|
| p {border-top-style:solid; border-top-width:medium;} |
Sample 2
|
| p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;} |
Sample 3
|
border
If the characteristics for all 4 sides of the border are the same, they can be combined into a single line using theborder property. In addition, all three border properties (border-style, border-width, and border-color) can be combined into a single line with the border command.For example, with the CSS declaration,
| p { border:#0000FF 5px solid; } |
The following HTML,
| A single line declares all border properties. |
yields the output below:
A single line declares all border properties.
This post was written by: Rajendra Prasad
Rajendra Prasad is a professional blogger, web designer and front end web developer. Follow him on Facebook
