左側の境界線は、何種類の実装方法があるのでしょうか

タイトル通りです。

<div></div>

まず、共通のスタイルを定義します。

div {
    position: relative;
    width: 150px;
    height: 60px;
    background: #ddd;
}

方法1（Border使用）

おそらくこれが一番考えやすいと思います。

div {
    border-left: 5px solid green;
}

div要素に対して左側に5ピクセル幅の境界線（ボーダー）を指定しています。

方法2（疑似要素）

div::after {
    content: "";
    width: 5px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    background: green;
}

div要素の後ろに疑似要素（::after）を作成し、そのスタイルを指定しています。

方法3（外側box-shadow）

div {
    box-shadow: -5px 0px 0 0 green;
}

div要素に対してボックスシャドウのスタイルを指定しています。

-5pxは、ボックスシャドウの左側のオフセットを指定しています。つまり、要素の左側から5ピクセル左に影を配置します。

垂直方向とぼかし半径、拡張半径は0でいいです。

方法4（内側box-shadow）

内側だったら、insetを使います。つまり、要素の境界内に影を作成します。

div {
    box-shadow: inset 5px 0px 0 0 green;
}

div要素に対してインセットボックスシャドウのスタイルを指定しています。

方法5（drop-shadow）

drop-shadow()はCSSフィルターとしてCSS3で導入されました。

div {
    filter: drop-shadow(-5px 0 0 green);
}

div要素に対してドロップシャドウのフィルターを指定しています。

方法6（線形グラデーション）

div {
    background-image: linear-gradient(90deg, green 0px, green 5px, transparent 5px);
}

div要素の背景に線形グラデーションを作成するためのスタイルを指定しています。

• linear-gradient()は、線形グラデーションを作成する関数です。
• 90degは、グラデーションの方向を指定しています。この場合は縦方向（上から下）にグラデーションが適用されます。
• green 0pxは、グラデーションの開始点での色と位置を指定しています。この場合は緑色の色を位置0ピクセルで指定しています。
• green 5pxは、グラデーションの中間点での色と位置を指定しています。この場合は緑色の色を位置5ピクセルで指定しています。
• transparent 5pxは、グラデーションの中間点からの終了点での色と位置を指定しています。この場合は透明な色（背景の透明）を位置5ピクセルで指定しています。

方法7（list-style）

これはあまりにも型破りです。読む必要はありません。

リストの先頭記号はlist-styleで設定できて、list-styleのサイズと色はfont-sizeとcolorで制御できることがわかっていますよね。

次に、list-style-typeを無限に拡大し、コンテナーのpadding-leftを設定すればいいです。

実際にやってみます。

div {
    display: list-item;
    list-style-type: square;
    list-style-position: inside;
    background: green;
    color: #ddd;
}

そして、リストアイテムを拡大して、padding-left: 5px;を入れます。

div {
    display: list-item;
    list-style: square inside;
    padding-left: 5px;
    font-size: 700px;
    line-height: 0;
    background: green;
    color: #ddd;
}

最後にoverflow: hidden;を入れて完成です。