border-style: solid; border-width: 5px; : border style « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. border style

border-style: solid; border-width: 5px;

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; CSS1 Border Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#outer {background-color: orange; border-style: solid; border-width: 5px; padding: 10px 10px;} 
#one {background-color: yellow; border-style: double; border-width: medium;}
#two {background-color: yellow; border-style: double solid; border-color: red green purple blue; border-width: thin medium thick .25cm;}
</style>
</head>
<body>
<div class="content">
  <div id="outer">
  <p id="one">This is a paragraph of text that has a
  red double border around it. Notice how the text
  creeps up on the edges. Padding values will help you
  avoid this problem.</p>
  <p id="two">This is another paragraph that has its
  borders set in a very bizarre way!</p>
  Notice that the paragraph blocks can be within a large
  boxed block structure.
  </div>
</div>
</body>
</html>








Related examples in the same category

1.The border-style Property
2.'border-style' Example
3.Border style all values
4.border style shorthand with three values
5.border-style: solid dotted;
6.border style shorthand with two values
7.border-style: hidden
8.border-style: dotted
9.border-style: dashed
10.border-style: solid
11.border-style: groove
12.border-style: ridge
13.border-style: inset
14.border-style: outset
15.border-style: none
16.border-style: solid dashed double dotted;
17.border-style: solid dashed dotted;
18.border-style: solid dashed double inset;
19.border-style: double; border-width: medium;
20.All border styles
21.border-style: hidden;
22.border-style: double
23.border-style: none
24.border-style: solid dashed double dotted
25.Various border-styles
26.When no border-color is specified, the border color is the value of the color property.
27.Individual border-style properties can be combined into a single property.
28.Shading border for paragraph
29.Use different border style to highlight
30.Border styles, color and size