Border Properties
CSS border property is a short-hand property.
Eg:
<style>
p
{
border: 1px solid blue;
}
</style>
<p>Border Properties</p>
| Property | Values |
|---|---|
| border-width | Medium, thin, thick |
| border-style | Dashed, dotted, groove, solid, inset, outset |
| border-color | Sets the color of an element's four borders |
Border Top
The border-top is a shorthand property which is used to declare all the border top properties in one declaration.
Eg:
<style>
p
{
border-top:2px #39C solid;
}
</style>
<p>Border Top Property</p>
| Property | Values |
|---|---|
| border-top-color | Sets the colour of an element's top border. |
| border-top-left-radius | It creates a rounded top-left corner of the element with the given radius. |
| border-top-right-radius | It creates a rounded top-right corner of the element with the given radius. |
| border-top-style | It sets the style of an element's top border. |
| border-top-width | It sets the width of an element's top border. |
Border Left
The border-left is a shorthand property which is used to declare all the border left properties in one declaration.
Eg:
<style>
p
{
border-left:2px #39C solid;
}
</style>
<p>Border Left Property</p>
| Property | Values |
|---|---|
| border-left-color | Sets the colour of an element's left border. |
| border-left-style | It sets the style of an element's left border. |
| border-left-width | It sets the width of an element's left border. |
Border Right
The border-right is a shorthand property which is used to declare all the border right properties in one declaration.
Eg:
<style>
p
{
border-right:2px #39C solid;
}
</style>
<p>Border Right Property</p>
| Property | Values |
|---|---|
| border-right-color | Sets the colour of an element's right border. |
| border-right-style | It sets the style of an element's right border. |
| border-right-width | It sets the width of an element's right border. |
Border Bottom
The border-bottom is a shorthand property which is used to declare all the border bottom properties in one declaration.
Eg:
<style>
p
{
border-bottom:2px #39C solid;
}
</style>
<p>Border Bottom Property</p>
| Property | Values |
|---|---|
| border-bottom-color | Sets the colour of an element's bottom border. |
| border-bottom-left-radius | It creates a rounded bottom-left corner of the element with the given radius. |
| border-bottom-right-radius | It creates a rounded bottom-right corner of the element with the given radius. |
| border-bottom-style | It sets the style of an element's bottom border. |
| border-bottom-width | It sets the width of an element's bottom border. |