範例一、使用 border-color、border-width 以及 border-style 來設計
<input type="text" style="border-color:green;border-width:3px;border-style:dotted;">
輸出結果範例在 input type text 標籤內使用 style 來宣告一段 css 語法的開始，在 style 中共使用了三個 css 語法，分別為 border-color:green 代表邊框顏色是綠色、border-width:3px 代表邊框寬度為 3px、border-style:dotted 代表邊框的樣式為點線，範例的每個項目都可以自己變更出不同的設計風格，舉例來說 border-color 的顏色就可以從《色碼表》中挑選不同的顏色，border-width 可以自己改變為其他寬度，例如 1px、6px ... 等，最後的樣式可以參考這篇：「CSS border-style 邊框樣式」裡面的樣式清單。範例二、直接使用 border 語法來處理
<input type="text" style="border:3px green dotted;">
輸出結果範例一將 border 的寬度、顏色以及樣式拆分開來寫，雖然表達很清楚，但某些時候似乎不這麼有效率，CSS 提供了一個 border 語法可以輕易的用簡短寫法完成同樣的效果，由範例二的語法與範例一的語法比較，可以發現 border 將寬度、顏色以及樣式全部整合在一起，這樣的寫法可以呈現相同的效果，且寫 code 的效率也更高，同樣的，border 裡面的每個項目都可以自己調整修改。延伸閱讀