TutorialLab
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).

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

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).

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 15px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

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).

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>
<body>

<h2>margin Properties:</h2>

<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>

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
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>
<body>

<h2>padding Properties:</h2>

<p>This is a paragraph with no specified padding.</p>
<p class="one">This paragraph has a top and bottom padding of 50px, a left padding of 80px, and a right padding of 30px.</p>

</body>
</html>

Previous Lecture Next Lecture

Aizaz Ali

Follow us

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