The CSS border properties allow you to specify the style, width, and color of an element's border.
The border-style property specifies what kind of border to display where one of the values shown below can be specified.
The border-style property can have one to four border style values (for top, right, bottom and left border).
If a single style value is specified all four sides will take up the same style.
If two values are specified then top and bottom border will take up the first value while the other two sides will take up the latter style value.
If three border style values are specified, first value will be assigned to the top border, second value will be assigned to both left and right side while the third style value will be assigned to the bottom side.
If four values are specified, first value will be assigned to the top side while the second value will be assigned to the right side, the third value will be assigned to the bottom side and the last value will be assigned to the left side of the element.
| Border Style | Description |
|---|---|
| dotted | Defines a dotted border |
| dashed | Defines a dashed border |
| solid | Defines a solid border |
| double | Defines a double border |
| groove | Defines a 3D grooved border. The effect depends on the border-color value |
| ridge | Defines a 3D ridged border. The effect depends on the border-color value |
| inset | Defines a 3D inset border. The effect depends on the border-color value |
| outset | Defines a 3D outset border. The effect depends on the border-color value |
| none | Defines no border |
| hidden | Defines a hidden border |
p{
border-style: groove;
}
The border-width property specifies the width of the four borders. The width can be set in px, pt, cm, em, etc as well as by using one of the three pre-defined values thin, medium, or thick.
The border-width property can also have one to four values and works the same way it works with the style. The border-width property will not work unless the border style is defined.
p{
border-style: solid;
border-width: 5px 10px 15px 20px;
}
The border-color property is used to set the color of the four borders. The color can be set by either color name, HEX, RGB values or the term transparent.
THe border-color property also supports 4 values which work the same way as the border-style and border-width. If the border-color is not set, the border inherits the color of the HTML element.
p{
border-style: solid;
border-color: red;
}
You can also define each side of a border with individual CSS property names as shown below for color, style and width.
p {
border-top-style: dotted;
border-top-color: red;
border-top-width: 3px;
}
Since a huge number of properties are needed to be specified to add border to HTML elements, it also supports shorthand property as shown below.
p{
border: 3px solid red;
}
You can also specify all properties for an individual side of an HTML element.
p{
border-bottom: 3px solid red;
}
The border-radius property is added to an HTML element to make its border rounded. Border-radius property is not supported in IE8 and earlier versions.
Hello World
p {
border: 2px solid red;
border-radius: 10px;
}
You can also create a circle with border-radius property with any value over 50% if the height and width of the HTML element is equal.
<div class="circle">Hello World</div>
<style>
.circle{
width:100px;
height:100px;
border:5px solid red;
border-radius:50%;
text-align: center;
padding: 25px;}
</style>
CSS border-image property allows you to set an image as the border around an element instead of the normal border.
The border-image property takes the image and slices it into nine equal parts. Then, it then places the corners at the corners and the middle sections are either repeated or stretched.
You need to define three values for border images which are as follows.
.bordered-div{
text-align: center;
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
The border-image property is the shorthand property for the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.
border-image: url(border.png) 50 round; border-image: url(border.png) 20% round; border-image: url(border.png) 30% round;
| Property | Description |
|---|---|
| border-image-source | Specifies the image to be used as a border |
| border-image-slice | Specifies how to slice the border image |
| border-image-width | Specifies the width of the border image |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
| border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |
Leave a comment