How to set the style of the right border with CSS
The code below shows you how to set the style of the right border with CSS.
<!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.dotted { border-right-style: dotted; }
p.dashed { border-right-style: dashed; }
p.solid { border-right-style: solid; }
p.double { border-right-style: double; }
p.groove { border-right-style: groove; }
p.ridge { border-right-style: ridge; }
p.inset { border-right-style: inset; }
p.outset { border-right-style: outset; }
</style>
</head>
<body>
<p class="dotted">
This paragraph has a dotted style right border.
</p>
<p class="dashed">
This paragraph has a dashed style right border.
</p>
<p class="solid">
This paragraph has a solid style right border.
</p>
<p class="double">
This paragraph has a double style right border.
</p>
<p class="groove">
This paragraph has a groove style right border.
</p>
<p class="ridge">
This paragraph has a ridge style right border.
</p>
<p class="inset">
This paragraph has an inset style right border.
</p>
<p class="outset">
This paragraph has an outset style left border.
</p>
</body>
</html>
The code above creates the paragraphs below.
This paragraph has a dotted style right border.
This paragraph has a dashed style right border.
This paragraph has a solid style right border.
This paragraph has a double style right border.
This paragraph has a groove style right border.
This paragraph has a ridge style right border.
This paragraph has an inset style right border.
This paragraph has an outset style right border.
Use the text editor below to practice what you have learned.