Defining the Border Style
Description
The border-style property can be one of the values shown in the following list.
- none - No border.
- dashed - A series of rectangular dashes.
- dotted - A series of circular dots.
- double - Two parallel lines with a gap between them.
- groove - Sunken into the page.
- inset - The content looks sunken into the page.
- outset - The content looks raised from the page.
- ridge - The border appears raised from the page.
- solid - A single, unbroken line.
The default value is none, meaning that no border is drawn.
Example
The following code defines a Basic Border.
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
div {<!--from ww w .j av a2 s . com-->
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
<div style='border-style: dashed;'> border-style: dashed;</div>
<div style='border-style: solid;'>border-style: solid;</div>
<div style='border-style: ridge;'>border-style: ridge;</div>
<div style='border-style: outset;'>border-style: outset;</div>
<div style='border-style: none;'>border-style: none;</div>
<div style='border-style: inset;'>border-style: inset;</div>
<div style='border-style: hidden;'>border-style: hidden;</div>
<div style='border-style: groove;'>border-style: groove;</div>
<div style='border-style: dotted;'>border-style: dotted;</div>
</body>
</html>