CSS border generator
A border consists of three components i.e. border-width, border-style and border-color. You can customize each and every component of border i.e. border-width, border-style and border-color for each individual side with our border generator tool.
div {
border-width: ;
border-style: ;
border-color: ;
}
border (All sides)
border-width:
border-style:
border-color:
border-top
border-top-width:
border-top-style:
border-top-color:
border-right
border-right-width:
border-right-style:
border-right-color:
border-bottom
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left
border-left-width:
border-left-style:
border-left-color:
How border generator works?
A border consists of border-width, border-style and border-color. Our generator facilitates you to change these propertie values for each individual side.
Now we'll the see what is meant by the values given in the border generator tools.
Suppose We have a box having width and height of 200px. And we'll change the values and see the resulting borders.
1. border-width
border-width property defines the thickness of the border. The value may be in px, pt or em. But border generator is measuring the width in px.
border-width: 10px 15px 20px 25px;
It means the width of top, right, bottom and left sides is 10px, 15px, 20px and 25px respectively.
2. border-style
border-style represents the style of border such as solid, dotted, dashed, inset, outset, ridge. You can set border style for each individual border with the generator. The syntax of border-style used in border generator is given below.
border-style: solid dashed dotted inset;
The above syntax means that the border-style of top, right, bottom and left side borders is solid, dashed, dotted and inset respectively.
3. border-color
border-color property defines the color of border. You can set the color of individual borders with our border generator. The syntax of border-color is given below.
border-style: solid dashed dotted inset;
The above four colors are defined for top, right, bottom and left side borders.
Was this article helpful?