Borders

Contact Us or call 1-877-932-8228
Borders

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 type="text/css">
	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 type="text/css">
	.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 type="text/css">
	.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

Next