CSS Border Code Tutorials

How to set color of the four borders with CSS

The code below shows you how to set the color of the four borders with CSS.

Note: the border-color property does not work if it is used alone. The border-style property must be set first, in order for the border-color property to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Web Development Tutorials.com</title>

<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff;
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}

</style>

</head>
<body>
<p class="one">
This is paragraph one.
</p>
<p class="two">
This is paragraph two.
</p>
<p class="three">
This is paragraph three.
</p>
<p class="four">
This is paragraph four.
</p>
</body>
</html>

The code above creates the paragraphs below.

This is paragraph one.

This is paragraph two.

This is paragraph three.

This is paragraph four.

Use the text editor below to practice what you have learned.