四方の枠線に見える箇所は 擬似要素で作成した要素の背景に、斜めに RedからLime、Blueに変わる、線形グラデーションをかけ、 本体の背面に四辺が見えるように位置を調節して配置します。 配置の値によって、様々なボーダーの見え方を表現することができます。　マウスを乗せると背景を全て表示します。
クリックで白い背景（本体）を角丸。 グラデーションボーダー
配置の値を変更

　配置の値: top: -3px;right: -3px; bottom: -3px;left: -3px;