CSS
In this tutorial we will learn about CSS border.
In the above image the area colored in yellow is the border for the element highlighted in blue.
Border as the name suggests is use to create border for the element. We can change the color, width and style of the border of an element using the border property.
border
Child element can inherit the border style from parent element.
We use the border-style property to set the style of the border.
border-style
Keywords for border-style are dashed, dotted, double, groove, inset, outset, ridge, solid, and none.
When the border-style property is set to none then no border is shown for the element.
none
In the following example we have set the border style to solid.
div { border-style : solid; }
We can set border style of each sides separately using the following properties.
In the following example we have set the border style of each sides of the div element having class container.
container
div.container { border-top-style : solid; border-right-style : dashed; border-bottom-style : double; border-left-style : dotted; }
This is a sample paragraph.
We can set the border style of each sides using the following shorthands.
div { border-style : solid dashed dotted double; }
The above rule will set:
div { border-style : solid dashed double; }
div { border-style : solid dashed; }
div { border-style : dashed; }
We use the border-width property to set the width of the border.
border-width
The value of border-width will be applied only after the border-style property is defined.
The value of border-width can be in length (px, cm, mm etc.) and any of the following keyword - thin, medium and thick.
In the following example we have set the border width in some of the different formats.
div { border-width : 2px; } div.blue { border-width : thin; } div.red { border-width : medium; } div.green { border-width : thick; }
We can set border width of each sides separately using the following properties.
In the following example we have set the border width of each sides of the div element having class container.
div.container { border-top-width : 2px; border-right-width : thin; border-bottom-width : medium; border-left-width : thick; }
We can set the border width of each sides using the following shorthands.
div { border-width : 1px thin medium thick; }
div { border-width : thin medium thick; }
div { border-width : thin thick; }
div { border-width : 1px; }
We use the border-color property to set the color of the border. The value can be in hex, color name, rgb and rgba format.
border-color
In the following example we have set the border color in some of the different formats.
div { border-color : #333; } div.blue { border-color : blue; } div.red { border-color : rgb(255, 0, 0); } div.green { border-color : rgba(0, 255, 0, 1); }
We can color the border of each sides separately using the following properties.
In the following example we have set the border color of each sides of the div element having class container.
div.container { border-top-color : red; border-right-color : #f00; border-bottom-color : rgb(0, 255, 0); border-left-color : rgba(0, 0, 255, 1); }
We can set the border color of each sides using the following shorthands.
div { border-color : red green blue yellow; }
div { border-color : red yellow blue; }
div { border-color : red blue; }
div { border-color : red; }
In order to set the border style, width and color we can use the following shorthand.
div { border : 1px solid #333; }
div { border-top : 1px solid red; border-right : 2px dashed blue; border-bottom : 3px dotted green; border-left : 4px double black; }