<style type="text/css">
div{
border: 10px solid blue; /* 通常就這麼寫，如果沒有特別需求 */
}
</style>
<div>哈囉！你好啊！</div>
<style type="text/css">
div{
border-width: 10px;
border-style: double;
border-color: green;
}
</style>
<div>哈囉！你好啊！</div>
<style type="text/css">
div{
border-top-width: 3px;
border-top-style: solid;
border-top-color: yellow;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: red;
border-left-width: 10px;
border-left-style: solid;
border-left-color: green;
border-right-width: 6px;
border-right-style: solid;
border-right-color: blue;
}
</style>
<div>哈囉！你好啊！</div>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 3px solid blue;
}
</style>
<div>正方形：200x200 像素</div>
<style type="text/css">
div#d1{
border: 1px solid #333;
height: 500px;
}
div#d2{
width: 50%;
height: 50%;
border: 3px solid blue;
}
</style>
<div>長方形：50% x 50% 百分心</div>
<style type="text/css">
div{
width: 400px;
height: 200px;
border: 3px solid blue;
border-radius: 50px;
}
</style>
<div>長方形寬高：400x200 像素，圓角50px</div>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 3px solid blue;
border-radius: 50%;
}
</style>
<div>長方形寬高：400x200 像素，圓角50px</div>
