facebook google plus twitter
Webucator's Free CSS Tutorial

Lesson: Borders, Margins and Padding

Welcome to our free CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn to add different types of borders around elements and to provide buffers between elements on the page using margin and padding.

Lesson Goals

  • Work with the border-style property.
  • Work with the border-color property.
  • Work with the border-width property.
  • Work with the border-image property.
  • Work with the border-radius property.
  • Work with the margin property.
  • Work with the padding property.
  • Work with the box-shadow property.

Getting Started

The following diagram shows how margins, borders, and padding affect the width and height of an element:Margins, Borders, and Padding Diagram

As the diagram shows, margins, borders, and padding increase the amount of space that an element takes up. For example, the width of the div above is set to 160 pixels. On all four sides, the div has 15 pixels of padding, a 10-pixel border, and a 20-pixel margin. The entire width of the element inclusive of its padding, border, and margin is 250 pixels (160px + (2 * (15px + 10px + 20px))). This becomes important when using positioning to layout pages.

The code for the page shown above follows:

Code Sample:

BordersMarginsAndPadding/Demos/Diagram.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
</head>
<body>
<div style="margin: 20px;
			border: 10px solid black;
			padding: 15px;
			background: red;
			text-align: center;
			color: white;
			width: 160px;">
				<img src="Images/block.gif" alt="block">
			</div>
<img src="Images/pixel.gif" alt="pixel" style="margin-left: 45px; width: 160px; height: 4px;">
</body>
</html>

Borders

Border-style

The border-style property is used to specify whether an element has a border or not and, if it does, how that border should appear. Possible values are listed below:

  • none
  • dashed
  • dotted
  • double
  • groove
  • inset
  • outset
  • ridge
  • solid

Code Sample:

BordersMarginsAndPadding/Demos/BorderStyles.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Border Styles</title>
<style>
	hr {
		width: 50%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	div {
		border-width: 4px;
	}
</style>
</head>
<body>
<h1>CSS Border Styles</h1>
<div style="border-style: dashed;">border-style: dashed;</div>
<hr>
<div style="border-style: dotted;">border-style: dotted;</div>
<hr>
<div style="border-style: double;">border-style: double;</div>
<hr>
<div style="border-style: none;">border-style: none;</div>
<hr>
<div style="border-style: groove;">border-style: groove;</div>
<hr>
<div style="border-style: hidden;">border-style: hidden;</div>
<hr>
<div style="border-style: inset;">border-style: inset;</div>
<hr>
<div style="border-style: outset;">border-style: outset;</div>
<hr>
<div style="border-style: ridge;">border-style: ridge;</div>
<hr>
<div style="border-style: solid;">border-style: solid;</div>
</body>
</html>

The above code will render the following:CSS Border Styles

Specifying Border-style by Side

Each side of an element can have a different border style. The properties for this are listed below:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

Border-color

The border-color property is used with border-style to specify the color of the border. Its value can be any valid color as described in About Color Values.

selector {
	border-style: value;
	border-color: value;
}

Specifying Border-color by Side

Each side of an element can have a different border color. The properties for this are listed below:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

Border-width

The border-width property is used with border-style to specify the width of the border on all four sides of an element. All the units of measurement can be used. In addition, the border width can be defined using the following relative terms:

  • thin
  • medium
  • thick

The border-width property will have no effect unless the element has a border-style defined either in a style sheet or by the user agent (e.g., browser).

selector {
	border-style:value;
	border-width:value;
}

Specifying Border-width by Side

Each side of an element can have a different border width. The properties for this are listed below:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

Border-image

CSS3 offers us the ability to render borders with images. Keeping in mind that older versions of popular browsers won't support this feature - and that some versions of browsers require a vendor-specific prefix - we can use the border-image property to craft interesting, complex borders for our elements.

Vendor-specific prefixes are a way for the various makers of browsers to add support for new CSS features in a manner specific to their particular type of browser. Firefox, for example, might offer a CSS property prefaced with the -moz- prefix, Internet Explorer with -ms-, Opera with -o-, Chrome and Safari with -webkit-, etc.

For a property like border-image, which was introduced in CSS3, we will often write multiple CSS rules to cover older versions of browsers, so that users with these browsers (which might not support the un-prefixed CSS rule) will see the style we want: -moz-border-image, -ms-border-image, etc.

The border-image property is shorthand for specifying the source, slide, width, outset, and repeat of the border image:

border-image properties
Property Description Default
border-image-source Path to the image to be used as border none
border-image-slice Inward offsets from the top, right, bottom, and left edges of the image 100%
border-image-width Widths of the image border 1
border-image-outset Amount by which the border image area extends beyond the border box 0
border-image-repeat How the images for the sides and the middle part of the border image are scaled and tiled, if at all stretch

Let's look at an example of using the border-image property:

Code Sample:

BordersMarginsAndPadding/Demos/BorderImage.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Border Image</title>
<style">
	.border {
		height: 200px;
		float: left;
		margin-right: 70px;
		background-color: hsl(20, 50%, 50%);
		color: hsl(0,0%,100%);
		text-align: center;
		padding: 28px 0;
		border: 1px;
	}
	#box1 {
		width: 150px;
		border-image-source: url(Images/border.png);
		border-image-slice: 28;
		border-image-width: 30px 30px 30px 30px;
		border-image-repeat: stretch;
		border-image-outset: 20;
	}
	#box2 {
		width: 150px;
		border-image: url(Images/border.png)  28 / 30px 30px 30px 30px / 20 stretch;
	}
	#box3 {
		width: 250px;
		border-image-source: url(Images/border.png);
		border-image-slice: 28;
		border-image-width: 30px 30px 30px 30px;
		border-image-repeat: repeat;
		border-image-outset: 20;
	}
	footer {
		clear: left;
	}
</style>
</head>
<body>
<h1>CSS Border Image</h1>
<div id="box1" class="border">
	box 1
</div>
<div id="box2" class="border">
	box 2
</div>
<div id="box3" class="border">
	box 3
</div>
</body>
</html>

Open ClassFiles/BordersMarginsAndPadding/Demos/BorderImage.html in a file editor and in a browser to view the page. The page displays three <div>s, each with an image border:

image border demo

Each of the three <div>s references the same image for their image borders: image border The first ("box 1") and second ("box 2") have exactly the same border-image properties; with the first we set each property separately, while with the second we set all of the properties via the shorthand notation. For both we use stretch, so that the border image - which is both shorter and wider than the elements whose border it is asked to be - is scaled taller and narrower to fill appropriately the border lengths. Note also that the corners of the border image are not skewed, a product of the fact that we have set the width of the border to the same size as the four colored squares that occupy the four corners of the border image.

The third ("box 3") <div> demonstrates the effect of the repeat value for the border-image-repeat property. Note that neither the horizontal nor the vertical border image is skewed; the horizontal borders show only a part of the border image (since the border image is itself wider than #box3) and the vertical borders show the border image repeated (since the border image is itself shorter than #box3.)

Border-radius

The border-radius property offers an easy method for adding rounded corners to <div>s or other elements. You can give a specific radius value for each corner or one value for all four corners. Like many CSS properties, you can specify this property with four separate statements or via one shorthand statement. All of the units of measurement can be used as the length of a radius.

div.cornersthesame {
					border-radius: 5px;
				}
				/* is the same as */
				div.cornersthesame {
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
					border-bottom-left-radius: 5px;
				}

We can also give two values for each corner (or for all four corners, in the shorthand), specifying the horizontal radius (first value) and vertical radius (second value) to present asymmetrical corners:

div.cornersnotthesame {
					border-radius: 2em 1.5em 4em 3em / 1em 2em 1em 3em;
				}
				/* is the same as */
				div.cornersnotthesame {
					border-top-left-radius: 2em 1em;
					border-top-right-radius: 1.5em 2em;
					border-bottom-right-radius: 4em 1em;
					border-bottom-left-radius: 3em 3em;
				}

The shorthand form of the property lists the horizontal radii (that is, the horizontal portion of each corner's radius) before the slash and vertical radii after the slash, in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted then it is the same as top-right. If bottom-right is omitted then it is the same as top-left. If top-right is omitted then it is the same as top-left.

Code Sample:

BordersMarginsAndPadding/Demos/BorderRadius.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Border Radius</title>
<style>
	.box {
		width: 200px;
		height: 200px;
		background-color: #ccc;
		padding: 10px;
		float: left;
		margin-right: 20px;
	}
	#box1 {
		border-radius: 20px;
	}
	#box2 {
		border-top-left-radius: 2em 1em;
		border-top-right-radius: 1.5em 2em;
		border-bottom-right-radius: 4em 1em;
		border-bottom-left-radius: 3em 3em;
		
	}
	#lemon {
		border: 2px solid hsl(60, 90%, 45%);
		background-color: hsl(60, 90%, 50%);
		border-radius: 10px 140px 30px 140px;
	}
</style>
</head>
<body>
<h1>CSS Border Radius</h1>
<div id="box1" class="box">
	box 1
</div>
<div id="box2" class="box">
	box 2
</div>
<div id="lemon" class="box">
	lemon
</div>
</body>
</html>

Open ClassFiles/BordersMarginsAndPadding/Demos/BorderRadius.html in a code editor and in a browser to view the page. The page displays three <div>s - two gray and one lemon yellow:

rounded corners demo

The first ("box1") has a gray background; all corners have a symmetrical 20-pixel radius.

The second ("box2") has a gray background with a different radius value for each corner; furthermore, all but the bottom-left corner have different values for the horizontal and vertical components of the border-radius. The lower-right corner manifests this most dramatically - the horizontal radius is a gently sloping 4em in length, while the vertical is a sharper 1em.

The last ("lemon") has a yellow background; its top-right and bottom-left corners have a large (and symmetric) radius, while the top-left and bottom-right corners have a much smaller radius - making the element look like a lemon.

Note that the border-radius property is supported by Internet Explorer from version 9.

Border

The border property is a shortcut property for specifying the width, style, and color in one step. (Note that the border-image and border-radius properties are not included in this shorthand.) There are similar shortcut properties for each border side:

  • border-top
  • border-right
  • border-bottom
  • border-left
selector {
	border: width style color;
}

As the code below shows, both block and inline elements can have borders:

Code Sample:

BordersMarginsAndPadding/Demos/Borders.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Borders</title>
</head>
<body>
<h1>CSS Borders</h1>
<h2>Border Width, Style and Color</h2>
<div style="border-width: 1px; border-style: solid; border-color: #ff6600;">
	border-width: 1px;<br>
	border-style: solid;<br>
	border-color: #ff6600;
</div>
<hr>
<div style="border-width: thick; border-style: dotted; border-color: #ff6600;">
	border-width: thick;<br>
	border-style: dotted;<br>
	border-color: #ff6600;
</div>
<hr>
<div style="border-top-width: thick; border-right-width: thin;
			border-bottom-width: thin; border-left-width: thick;
			border-style: dashed; border-color: #ff6600;">
	border-top-width: thick;<br>
	border-right-width: thin;<br>
	border-bottom-width: thin;<br>
	border-left-width: thick;<br>
	border-style: dashed;<br>
	border-color: #ff6600;
</div>
<hr>
<div style="border: 5px solid #ff6600;">
	border: 5px solid #ff6600;
</div>
<hr>

<div>Inline content can also have a
	<span style="border: 2px solid #ff6600;">border</span> around it.
</div>

<div style="border: 1px dotted #ff6600;">
	border: 1px dotted #ff6600;
</div>

</body>
</html>

The above code will render the following results:CSS Borders

Margin

The margin property is used to specify the margin around an element. It can be applied to both block and inline elements. Margins can be specified in number of units (e.g., 20px) or in percentage of the width of the containing element.

Code Sample:

BordersMarginsAndPadding/Demos/Margin.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Margin</title>
</head>
<body>
<h1>CSS Margin</h1>
<div style="background-color: #0066ff; 
			border: 5px solid #ff99ff; padding: 0px;">
	<div style="background-color: #ff6600; border: 2px solid black; 
				margin-top: 30px; margin-right: 30px; 
				margin-bottom: 30px; margin-left: 30px;">
		margin-top: 30px;<br>
		margin-right: 30px;<br>
		margin-bottom: 30px;<br>
		margin-left: 30px;
	</div>
</div>
<hr>
<div style="background-color: #0066ff; 
			border: 5px solid #ff99ff; padding: 0px;">
	<div style="background-color: #ff6600; 
				border: 2px solid black; margin: 30px;">
		margin: 30px;
	</div>
</div>

</body>
</html>

The above code will render the following results:CSS Margin

Specifying Margins by Side

Each side of an element can have a different margin. The properties for this are listed below:

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

Padding

The padding property is used to specify the padding between an element's edges and its content. It can be applied to both block and inline elements. Padding can be specified in number of units (e.g., 20px) or in percentage of the width of the containing element.

Code Sample:

BordersMarginsAndPadding/Demos/Padding.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Padding</title>
</head>
<body>
<h1>CSS Padding</h1>
<div style="background-color: #0066ff; border: 5px solid #ff99ff; padding: 0px;">
	<div style="background-color: #ff6600; border: 2px solid black; 
			margin: 0px; padding-top: 30px; padding-right: 30px; 
			padding-bottom: 30px; padding-left: 30px;">
		padding-top: 30px;<br>
		padding-right: 30px;<br>
		padding-bottom: 30px;<br>
		padding-left: 30px;
	</div>
</div>
<hr>
<div style="background-color: #0066ff; border: 5px solid #ff99ff; padding: 0px;">
	<div style="background-color: #ff6600; border: 2px solid black; margin: 0px; padding: 30px;">
		padding: 30px;
	</div>
</div>

</body>
</html>

The above code will render the following results:CSS Padding

Specifying Padding by Side

Each side of an element can have a different padding. The properties for this are listed below:

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

Box Shadow

CSS3 makes it easy to add drop shadowing to elements with the box-shadow property. Specify the horizontal and vertical widths of the shadow - and, optionally, the amount of blur, the size (spread) of the shadow, the shadow color, and whether the shadow should be an outer shadow (the default) or an inset shadow - and it's easy to add a shadow to a <div> or other element:

div.shadow {
	box-shadow: 20px 20px 15px #ccc;
}

The code above would render a gray (#ccc) drop shadow 20 pixels on the right and 20 pixels on the bottom, with a 15-pixel spread. Negative horizontal or vertical values give a left or top shadow, respectively. The example below illustrates the various properties of box-shadow:

Code Sample:

BordersMarginsAndPadding/Demos/BoxShadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Box Shadow</title>
<style>
	.box {
		width: 130px;
		height: 130px;
		float: left;
		margin-right: 50px;
		background-color: #BCB866;
		padding: 30px;
	}
	#box1 {
		box-shadow: -5px 15px 10px #CE3700;
	}
	#box2 {
		box-shadow: 20px 20px 25px 10px #CE3700;
	}
	#box3 {
		box-shadow: 10px 10px 10px #CE3700 inset;
	}
</style>
</head>
<body>
<h1>CSS Box Shadow</h1>
<div id="box1" class="box">
	box 1
</div>
<div id="box2" class="box">
	box 2
</div>
<div id="box3" class="box">
	box 3
</div>
</body>
</html>

Open ClassFiles/BordersMarginsAndPadding/Demos/BoxShadow.html in a code editor and in a browser to view the page. The page shows three tan <div>s, each with a red shadow. The first ("box 1") has a negative horizontal distance (-5px) and positive (15px) vertical distance - thus getting a shadow on the left and bottom.

box shadow demo

The second ("box 2") has a shadow on the right and bottom; note that its larger spread value makes its edge "fuzzier" than that of "box 1".

The last ("box 3") has, because of the inset keyword, an interior shadow.

The box-shadow property is supported by Internet Explorer from version 9.

Borders, Margin and Padding

Duration: 10 to 20 minutes.

In this exercise, you will continue to work on Stories.html by applying borders, margin, and padding to different elements on the page.

  1. Open BordersMarginsAndPadding/Exercises/Stories.html.
  2. Modify the text properties of the different elements on the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with borders, margin and padding.
  3. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

BordersMarginsAndPadding/Solutions/Stories.html
<!DOCTYPE HTML>
<html>
<head>
<title>Stories</title>
<style>
h1 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
		letter-spacing:.25em;
		word-spacing: .4em;
		margin-bottom: 20px;
		text-align: center;
	}
	
	p {
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
		line-height: 1.2;
		text-indent: 2em;
	}

	#links {
		width: 300px;
	}
	
	a {
		display: block;
		background-color: #eaf1dd;
		color: #060;
		text-decoration: none;
		font-family: Verdana, Geneva, sans-serif;
		padding: 6px 4px;
		margin: 4px;
		border-right: 2px solid #999999;
		border-bottom: 2px solid #999999;
		border-top-width: 0px;
		border-left-width: 0px;
	}

	a:hover {
		color: #030;
		border: 1px solid #9999ff;
	}

	a:active {
		color: #aca;
		border-left: 2px solid #030;
		border-top: 2px solid #030;
		border-right-width: 0px;
		border-bottom-width: 0px;
	}
	
	.topLink {
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
	
	.BackToTop {
		text-decoration: none;
		text-transform: capitalize;
		border-style: groove;
		border-color: #0000ff;
		border-bottom-width: 5px;
		border-left-width: 5px;
		border-top-width: 2px;
		border-right-width: 2px;
		padding: 4px;
		width: 280px;
	}
	
	div {
		padding-top: 2px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 2px;
		margin-bottom: 15px;
	}
	
	body {
		margin: 0px;
		border: 40px ridge #cc6666;
		padding: 15px;
		background-color: #ffff99;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<div id="links">
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>
</div>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>
<div style="background-image: url(Images/poohsmall.gif); 
			background-repeat: no-repeat; background-color: #ff9900; 
			color: #000066;
			border-radius: 10px;
			box-shadow: 5px 5px 2px #CCC;">
<p>Pooh always liked a little something
---- C O D E   O M I T T E D ----
 and said to himself 'Silly Old Bear!'</p>
</div> 
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>
<div style="background-image: url(Images/TeaParty.gif); 
			background-position: right; background-repeat: no-repeat;">
<p>There was a table set out under a tree
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<div style="background-image: url(Images/Cupid.gif); color: #ff3333; border-radius:10px;">
<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
 and you know, too, how ill-behaved he is!</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>
</body>
</html>