TutorialLab
CSS Border, Margin and Padding
Home » Web Development » CSS Tutorials » CSS Border, Margin and Padding

CSS Border, Margin and Padding

CSS Border, Margin and Padding

Today we will discuss CSS Border, Margin and Padding.

CSS Border

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.The following values are allowed:

  • 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
  • out-set – Defines a 3D outset border. The effect depends on the border-color value
  • none – Defines no border
  • hidden – Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Border Width

The border-width property specifies the width of the four borders.The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.The  border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

  • name – specify a color name, like “red”
  • RGB – specify a RGB value, like “rgb(255,0,0)”
  • Hex – specify a hex value, like “#ff0000”
  • transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

CSS Margin

The CSS margin properties set the size of the white space OUTSIDE the border.With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

The following example sets different margins for all four sides of a <p> element:

CSS Padding

The CSS padding properties define the white space between the element content and the element border.The padding clears an area around the content (inside the border) of an element.With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Previous Lecture Next Lecture

Aizaz Ali

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.