ボタンにフォーカスしたときだけ枠線を表示したい状況があり、
意気揚々と以下のような CSS を書いたところ、
フォーカスしたときに枠線は表示されるものの、
同時にボタンの表示位置がずれるという残念な結果になった。
#target-button:focus{border:solid5pxred;}どうやら borderは枠線を表示するスペースを必要とするため、
常に枠線を表示するような場合には良いが、
フォーカスやホバーしたときにだけ枠線を表示する場合には向かない模様。
似たようなプロパティで outlineはスペースを取らずに枠線を表示できるため、
こちらを使用したら上手くできた。
フォーカスやホバーなど、特定の条件に一致した時だけ枠線を表示するなら outlineを使うのがよさそう。
ただし、 outlineでは 上だけ表示 や 下だけ表示 といったことができないようなので、
そういったことがやりたい場合はまた他の方法を探す必要がありそう。。。
以下、ホバーしたときだけ枠線を表示するサンプル。
BUTTON1 が border、BUTTON2 は outlineで枠線を表示しています。
See the Pen css_border_outline by jz4o (@jz4o) on CodePen.