CSS Border Property to set Color, Width and Style

Posted by Valli On 1/27/2014 Be the first to comment!

The CSS Border is used to define the outline of an html element and can be inherited from the parent container. The css border property is used frequently to set color, style and the width of an html element border.

The border can be set for all the four sides of an element using shorthand property or set individually for each sides as per the need.

Shorthand Property for CSS Border

The border property syntax is,

border: width style color;

1. Width is used to set the thickness of the border. The width values are,

Width Value	Width Example
thin	This is thin border
medium	This is medium border
thick	This is thick border
units (like px, em etc)	This border width is of 10px
inherit	Border width is inherited from the parent container

2. Style is used to set how the border is displayed. The style values are,

Style Value	Style Example
none	No border
hidden	Similar to no border except in case of border conflict resolution for table elements
dotted	This is dotted border
dashed	This is dashed border
solid	This is solid border
double	This is double border
groove	This is groove border
ridge	This is ridge border
inset	This is inset border
outset	This is outset border
inherit	Border style is inherited from the parent container

3. Color is used to set the color of a border. The color values are,

Color Value	Color Example
Color Name	red, blue, black etc
RGB Value	rgb(100,111,80)
Hex Code	#66ddde

Examples

border: 1px solid black;

border: 5px double blue;

border: thin dashed rgb(255, 0, 0);

border: 2px dotted green;

border: thick groove #21ABCD;

border: thick ridge #21ABCD;

border: 5px inset #D891EF;

border: 5px outset #D891EF;

border: 3px hidden red;

Set border for each side

The borders can be set individually using,

border-top: width style color;

border-bottom: width style color;

border-left: width style color;

border-right: width style color;

Note: The width, style and color property values will be the same as for “border” property except these properties will be applied only to the corresponding sides of the html element.

CSS also provides user with greater flexibility of setting the border properties individually. In this way we can set only those properties that are required. Let us see one by one.

1. Border Width

The border width is used to set the thickness of the border of an element. Similar to CSS Margin and CSS Padding the borders can be set for all the four sides of an element. The border width can be set in two ways. 1. Using the shorthand property to set width of all the borders in a single line. 2. Set the border width individually for all the four sides of an element.

Shorthand Property for Border Width

The syntax to set the border width of an element in a single line is,

border-width: top-value right-value bottom-value left-value;

Example

border-color: #E03C31;
border-style: dashed;
border-width: 1px thin medium thick;

Border Width Property for each side

The properties to set border width individually for all the four sides are,

border-top-width: value;

border-right-width: value;

border-bottom-width: value;

border-left-width: value;

Example

border-color: #FFA700;
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 10px;

2. Border Style

The border style is used to the set how the border is displayed. The border style can be set in two ways. 1. Using the shorthand property to set the style to all the four sides of an element in a single line. 2. Set the border style for each side individually of an element.

Shorthand Property for Border Style

The syntax to set the border style of an element in a single line is,

border-style: top-value right-value bottom-value left-value;

Border Style Property for each side

The properties to set border style individually for all the four sides are,

border-top-style: value;

border-right-style: value;

border-bottom-style: value;

border-left-style: value;

Example

border-width: medium;
border-color: #03C03C;
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;

3. Border Color

The border color property is used to set the color of the border of an html element. It can be set in two ways. 1. Using the shorthand property. 2. Set the border colors individually.

Shorthand Property for Border Color

The syntax to set the border color of an element in a single line is,

border-color: top-value right-value bottom-value left-value;

Border Color Property for each side

The properties to set border color individually for all the four sides are,

border-top-color: value;

border-right-color: value;

border-bottom-color: value;

border-left-color: value;

Example

border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: #6699CC;
border-left-color: #CD7F32

Note: When using shorthand property for border-width, border-style and border-color, they can have 4, 3, 2 or single parameter. The rules for using different number of parameters will be same as css margin and padding properties. It is recommended that you read css margins and css padding articles before reading the css borders to understand it better.

Summary

For your easy reference the css border properties we have discussed so far is summarized below in a table.

	Shorthand property	Width	Style	Color
Border Top	border-top: width style color;	border-top-width: value;	border-top-style: value;	border-top-color: value;
Border Right	border-right: width style color;	border-right-width: value;	border-right-style: value;	border-right-color: value;
Border Bottom	border-bottom: width style color;	border-bottom-width: value;	border-bottom-style: value;	border-bottom-color: value;
Border Left	border-left: width style color;	border-left-width: value;	border-left-style: value;	border-left-color: value;

CSS Padding

Posted by Valli On 1/23/2014 Be the first to comment!

The CSS Padding is the space between the border of an html element and the actual content inside the element. Like css margin, the html elements can have padding on all the four sides and the padding property cannot be inherited from its parent container.

The above picture depicts the padding clearly, where the inner block is padded with some white space (marked with green text) between its border and the text content.

Example

See the below two html blocks, first without padding and the next with padding.

html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding.

html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding.

The css padding property can be set individually for each side of an html element like

padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

Note: The value can be of units (like pixel, point etc) or percentage.

Else all the four padding values can be defined in a single line like below,

padding: padding-top padding-right padding-bottom padding-left;

The css padding property takes up 4, 3, 2 or a single parameter.

CSS Padding with Four Parameters

If you want padding of 5 pixels to the top, 10 pixels to the bottom and left and right with 5 pixels for an element then you can use,

padding: 5px 5px 10px 5px;

CSS Padding with Three Parameters

The padding property can be set with three parameters like,

padding: 10px 5px 20px;

The html element will be set with padding of top => 10px, left/right => 5px and bottom => 20px. The left and right side takes up the same padding value.

Note: If padding is declared with two or three values, the undeclared values are taken from the opposite side.

CSS Padding with Two Parameters

If we want to set the padding on top-bottom and left-right with same value then it can be written with two parameters like below.

padding: 5% 10px;

First parameter refers to the padding of top and bottom side.
Second parameter refers to the padding of left and right side.

CSS Padding with Single Parameter

If we want all the four sides with equal padding value then it can be written with a single parameter like below.

padding 0;

Here the padding for all the four sides will be set to 0 (no padding).

Note: if padding for a side(s) is 0 (zero), then no need to suffix with units (such as px) or %.

CSS Margins

Posted by Valli On 1/11/2014 Be the first to comment!

The CSS margin defines the space around an HTML element (like <body>, <div>, <img> etc). We used to mark margins while writing with pen and paper to enhance readability and presentation. Likewise the webpage contents do need margins. The CSS margin property let you take control of the entire webpage elements and set margins entirely or to an individual element in a webpage. You have already got a glimpse of using css margins in the post Different ways to add CSS styles to an HTML Page. Here let us see in detail.

As you can see from the above image, there are four margin properties to be set for an html element. They are,

margin-top: value;
margin-bottom: value;
margin-left: value;
margin-right: value;

Note: The value can be of units (like pixel, point etc), percentage or auto.

All the four css margin properties can be defined in a single line. It has the syntax,

margin: margin-top margin-right margin-bottom margin-left;

The css margin property takes up 4, 3, 2 or a single parameter.

CSS Margin with Four Parameters:

If you want to set margin of 10 pixels to the top, 15 pixels to the bottom and left and right to spare 5 pixels of margin space, then you can use,

margin: 10px 5px 15px 5px;

CSS Margin with Three Parameters:

In the above example the left and right margins are both 5px, so we can rewrite it with three parameters.

margin: 10px 5px 15px;

The margins will be set as top => 10px, left/right => 5px and bottom => 15px.

If we don’t provide the fourth value, the browser assigns the value of its opposite side margin. So the right margin value will be taken up for the left margin.

CSS Margin with Two Parameters:

If top-bottom margins and left-right margins are of the same value then it can be written with two parameters like below

margin: 10% 0;

First parameter refers to top, bottom margin values
Second parameter refers to left, right margin values

Note: If there is no margin for a side then it should be given as 0. No need for adding px to 0.

CSS Margin with Single Parameter:

If all the four margins are of same value then it can written with a single parameter like below,

margin 10px;

Here all the four margins will be set to 10 pixels.

Using auto:

If you want to position a block-level container (like <body>, <div>) in the center of its parent container, then set its left and right margins to auto value. You must set the width of the container in order to avoid the container’s width stretched to match its parent container.

To place a block at the center with its top and bottom margins of 10px, you could use,