HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計

如何處理 HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計是必要的技巧，因為傳統的 HTML textarea 預設的邊框視覺效果比較單調，難以與比較有質感的網頁設計做搭配，以往用 HTML 也的確比較難設計出好看的 textarea 邊框，不過現在有 CSS 就方便許多，網頁設計師可以很輕鬆的透過 CSS 內建的 border 屬性來設計出好看的 textarea 邊框，包含邊框顏色與邊框樣式。

幾個必會的技巧語法

Point1、HTML textarea 文字輸入欄位語法（詳細：表單文字輸入欄位 textarea）

Point2、CSS border 邊框設計語法（詳細：CSS border 邊框設計）

border: 邊框粗細邊框顏色邊框樣式;

以上兩個重要語法請確實熟悉，只要把 CSS 的 border 屬性套用到 HTML textarea 就可以隨心所欲的修改多行文字輸入欄位的邊框顏色與樣式，我們會在範例中多呈現幾個不同效果給各位讀者參考。

HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計範例

範例的實際視覺效果

我們在範例中總共準備了三個不同的 textarea 多行文字輸入欄位，並透過 CSS 的 border 屬性分別替它們設計出不同的邊框效果，由左而右分別是灰色的細邊框、紅色的虛線邊框以及最右邊的藍色雙十線邊框，是不是把原本單調的 textarea 邊框用較活潑的視覺效果呈現出來了呢？這個技巧非常好用，你可以在《CSS border-style 邊框樣式設計》篇中找到更多邊框樣式。

更多 HTML textarea 設計