CSS Border properties draw different line styles around HTML elements.
border-color, border-style, border-width
To display a border around a HTML element you have to define the fallowing properties: border-color, border-style, border-width.
border-color
The border-color property sets the color of the border.
- name - specify a color name (blue, green, ...).
- RGB - specify a RGB value, like 'rgb(10,20,250)'.
- Hex - A hex value (#0101ff , #a8feb8).
- Syntax:
The 'border-color' does not work if it is used alone. You need to use the 'border-style' property to set the borders first.
• You can also set individual border color values for each side, with the fallowing properties:
- border-top-color - sets the color of the top border
- border-bottom-color - sets the color of the bottom border
- border-left-color - sets the color of the left border
- border-right-color - sets the color of the right border
border-style
The border-style property specifies what kind of border to display. You can define one of the fallowing values.
none specifies no border.In the image below you can see the effect of the other values:
- Syntax:
- border-top-style - sets the style of the top border
- border-bottom-style - sets the style of the bottom border
- border-left-style - sets the style of the left border
- border-right-style - sets the style of the right border
border-width
The border-width sets the size of the border.
The value of this property is set in pixels, or by one of the three pre-defined values: thin, medium, or thick.
- border-top-width - sets the size of the top border
- border-bottom-width - sets the size of the bottom border
- border-left-width - sets the size of the left border
- border-right-width - sets the size of the right border
Example:
<style>
#idd {
border-style: outset;
border-width: 3px;
border-color: blue;
padding:3px;
}
</style>
<h4>Example CSS border-style, border-width, border-color</h4>
<div id='idd'>Free Web Development courses and resources.</div>
Border Property
Using the border property you can shorten the code. It accept three values representing border-width, border-style, and border-color.
• You can also set border shorthand property values for each side, with the fallowing syntaxes:
- border-top: width_val style_val color_val;
- border-bottom: width_val style_val color_val;
- border-left: width_val style_val color_val;
- border-right: width_val style_val color_val;
Example:
<style>
#idd {
border-left: 4px outset red;
border-right: 4px outset green;
border-bottom: 2px dashed blue;
padding:3px;
}
</style>
<h4>Example border-left, border-right, border-bottom</h4>
<div id='idd'>If the life is a dream, where and who is the dreamer?</div>
Annul /Remove border
To annul /remove border, use the none value.
- In the following example it is set a border for all margins, then it is removed the bottom border.
<style>
#idd {
border: 2px solid blue;
border-bottom: none;
padding:3px;
}
</style>
<h4>Example css border property</h4>
<div id='idd'>Wake Up the Truth.</div>