CSS Margin Padding and CSS Border Style

0 96

CSS Margin Padding CSS Border Style Border Color Border Width CSS Outlines

in this tutorial, we will briefly discuss on CSS Margin Padding CSS Border Style Border Color Border Width CSS Outlines

CSS Padding

To add a specific amount of space between the border of an element and its contents padding property is used.in other word padding property will define space inside table or border.


To add a white space around an element, on the outside of the element margin property used.in other word we can say margin property will define space outside table or border.

CSS Border Style

Border Style

Borders are rectangular outlines that surround an element. Through CSS we can add the border to anything in a web page .Border property in CSS specifies the color width height position.

Border style properties are.

border-style properties Description
border-left-style This property will set left side border of the element.
border-right-style This property will set right side border of the element.
border-top-style This property will set border top of the element.
border-bottom-style This property will set the bottom border of the element.

Values of border-style properties are.

Value Description
dashed dashed value specify dashed border.
dotted dotted value specify dotted border.
double double value will define two borders.
groove groove value specify 3D grooved border.
inset inset value specify 3D inset border.
outset outset value specify 3D outset border.
ridge ridge value specify ridge border.
solid solid value specify solid border.

Border Color

There are four types color properties in CSS that you can apply to your border right left top and bottom.

Border Color properties are.

The property Description
border-bottom-color border-bottom-color will specify a color to the bottom border.
border-left-color border-left-color will specify color to left border.
border-right-color border-right-color will specify color to right border.
border-top-color border-top-color will specify a color to the top border.


Border color property has different color values to apply the different shade of color to the border.

Value Description
color color value specify to apply color to the border RGB or hexadecimal value or color name.
transparent a transparent value used to make a border transparent

Border Width

The border-width allow you to define a width of any right left top or bottom border in CSS.

The property Description
border-bottom-width the border-bottom-width property will specify a width of the bottom border.
border-left-width border-left-width property will specify width of left border.
border-right-width border-right-width property will specify width of right border.
border-top-width border-top-width property will specify width of top border.

Values of Border Width are

Value Description
medium this will specify medium border.
length used in accepting an explicit value that specifies the thickness of the border.
thick thick value used to display thick border.
thin thin value used to display thin border.

CSS Outlines

CSS outline is a line drawn in style, color, and width of an outline the element to make the element stand out, the outline property defines.



Leave A Reply

Your email address will not be published.