skylying/border.html

## border.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Traviz</title>
</head>
<style type="text/css">
	#border-example {
		background: red;
		width:100px;
		Height:100px;
		Border-radius:20px;
		Border:5px solid green;
	}
	#border-example2 {
		background: red;
		width:100px;
		Height:100px;
		Border-radius:20px;
		Border:50px solid green;
	}
	#border-example3 {
		background: red;
		width:100px;
		Height:100px;
		Border-radius:100px;
		Border:50px solid green;
	}
</style>
<body>
	<h1>Hello Chloe</h1>
	<legend>DIV Borer 範例1 , 正常情況, Border 寬度 5px</legend>
	<div id="border-example"></div>
	<hr />
	<legend>DIV Borer 範例2 , 亂搞情況, Border 寬度 50px, 裡面變成正方形</legend>
	<div id="border-example2"></div>
	<legend>DIV Borer 範例3 , 亂搞情況, Border 寬度 50px, 把 border-radius 改成 100, 裡面就變圓了</legend>
	<div id="border-example3"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Traviz</title>
	</head>
	<style type="text/css">
	#border-example {
	background: red;
	width:100px;
	Height:100px;
	Border-radius:20px;
	Border:5px solid green;
	}
	#border-example2 {
	background: red;
	width:100px;
	Height:100px;
	Border-radius:20px;
	Border:50px solid green;
	}
	#border-example3 {
	background: red;
	width:100px;
	Height:100px;
	Border-radius:100px;
	Border:50px solid green;
	}
	</style>
	<body>
	<h1>Hello Chloe</h1>
	<legend>DIV Borer 範例1 , 正常情況, Border 寬度 5px</legend>
	<div id="border-example"></div>
	<hr />
	<legend>DIV Borer 範例2 , 亂搞情況, Border 寬度 50px, 裡面變成正方形</legend>
	<div id="border-example2"></div>
	<legend>DIV Borer 範例3 , 亂搞情況, Border 寬度 50px, 把 border-radius 改成 100, 裡面就變圓了</legend>
	<div id="border-example3"></div>
	</body>
	</html>