➖ Border and Outline

Inputタグをスタイル化する場合、border属性とoutline属性の違いは何ですか?

Border

borderは、要素の内線を定義するためのプロパティです.

borderは要素の内部に作成されます.

borderが空間を占めています.

border

      input {
        background-color: gray;
      }

border:none

      input {
        border: none;        
        background-color: gray;
      }

Outline

アウトライン属性は、要素の外線を定義する属性です.

アウトラインはスペースを占めません.

inputラベルでoutline:noneを指定すると、フォーカス時にoutlineが強調表示されません.

outlineは要素の外部に作成されます.

アウトライン:noneが適用されていない場合

      input {
        border: none;
        background-color: gray;
      }

アウトライン:noneを適用する場合

      input {
        border: none;
        outline : none;
        background-color: gray;
      }

Conclusion

borderとoutlineの違いは微妙なので、上記以外はあまり気にする必要はないようです.
ただし、stlingに注意するならborderradiusなどborder属性の選択範囲がたくさんあるので、borderを選んで使いましょう.
-以上-