【javascript】フォーム部品のborderの色を変更したい

Question

実現したいこと

ユーザーがメールアドレスを入力できるフォーム部品を作っています。
その際、入力をする際にフォーム部品をクリックすると
borderの色が変わるようにしたいのですが
エラーがでないのに、borderの色が変わりません。

初歩的な内容かもしれないのですが、
１時間模索しても解決しませんでした。
ご教示いただけますと幸いです。

###試したこと
・cssでbordercolorの設定をしたあとに「classlist.add」でできるか試してみる。
・getElementByIdではなく、quelySelectorで「input」タグを取得する方法にかえる。

該当のソースコード

 <div class="form-input">
   <input type="text" id="inputEmail" placeholder="Email">
   <div class= "btn" type="submit">メールアドレスを追加</div>
   </div>
  

'use script'
const inputEmail = document.getElementById('inputEmail');
inputEmail.addEventListener('click', () => {  
inputEmail.style.boderColor =　"red";
});

###追記

ご回答いただき、「border」のスペルミスを発見し、修正いたしましたが、
以下の問題が出てきました。

inputをクリックする
↓
フォーム部品が青いborderに変わる（cssの設定を何もしなくても変わる青いborderです）
↓
そのあとにフォーム部品ではない場所をクリックする
↓
フォーム部品が赤いborderに変わる。

そもそものコードの書き方が間違っているのでしょうか？
分かる方がいましたらご教示いただけると幸いです。

Answer 1

つづりが間違ってます。

inputEmail.style.boderColor =　"red";
↓
inputEmail.style.borderColor =　"red";