CSS

border-right: <border-width> <border-style> <border-color>;

.example {
	border-right: 2px solid red;
}

.example {
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: blue;
}

例：

.example {
	border: 1px solid black;
	border-right: 3px dashed green; /* 右側だけ上書きされる */
}

.container {
	display: flex;
	border: 1px solid #ddd;
}
.sidebar {
	width: 140px;
	padding: 1ex;
	border-right: 4px solid #ccc; /* 右側に区切り線を設定 */
}
.content {
	flex: 1;
	padding: 1ex;
}
.sidebar p:first-child,
.content p:first-child {
	font-weight: bold;
}

<div class="container">
	<div class="sidebar">
		<p>サイドバー</p>
		<ul>
			<li>メニュー1</li>
			<li>メニュー2</li>
			<li>メニュー3</li>
		</ul>
	</div>
	<div class="content">
		<p>メインコンテンツ</p>
		<p>ここに主要なコンテンツが表示されます。</p>
	</div>
</div>

.responsive-box {
	padding: 1em;
	border-right: 4px solid darkgreen; /* 通常時は右ボーダー表示 */
}
@media (max-width: 768px) {
	.responsive-box {
		border-right: none; /* 画面幅768px未満では右ボーダー削除 */
	}
}

<div class="responsive-box">
	<p>このボックスは、画面幅が768px以上の場合は右側にボーダーが表示され、768px未満の場合は表示されません。	</p>
</div>

@keyframes borderBlink {
	0% { border-right-color: palegreen; }
	50% { border-right-color: darkgreen; }
	100% { border-right-color: palegreen; }
}
.animated-border {
	padding: 20px;
	margin: 20px;
	border-right: 4px solid palegreen; /* 初期状態の右ボーダー */
	animation: borderBlink 2s infinite; /* 2秒でループするアニメーション */
}

<div class="animated-border">
	<p>このボックスは、右側のボーダーがアニメーションで色が変化します。</p>
</div>

.gradient-border {
	position: relative;
	padding: 20px;
	margin: 20px;
	/* 要素自体にはボーダーを設定せず、擬似要素で表現 */
}
.gradient-border::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;        /* ボーダーの幅 */
	height: 100%;      /* 要素全体の高さに合わせる */
	background: linear-gradient(to bottom, palegreen, darkgreen);
	border-radius: inherit; /* 親要素の角丸を継承（必要に応じて） */
}

.box {
	box-sizing: border-box;
	border-right: 4px solid #333;
}

.nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
}
.nav-menu li {
	border-right: 3px solid palegreen;
	padding: 10px;
	transition: border-color 0.3s;
}
.nav-menu li:hover {
	border-right-color: darkgreen;
}

<ul class="nav-menu">
	<li>ホーム</li>
	<li>サービス</li>
	<li>会社情報</li>
	<li>お問い合わせ</li>
</ul>

:root {
	--main-border-width: 2px;
	--main-border-style: solid;
	--main-border-color: #ff4500;
}
.example {
	border-right: var(--main-border-width) var(--main-border-style) var(--main-border-color);
}

:root {
	--border-color: #333;
}
@media (max-width: 600px) {
	:root {
		--border-color: #888;
	}
}
.responsive-box {
	border-right: 1px solid var(--border-color);
}

例（Sassの場合）

$border-width: 3px;
$border-style: dashed;
$border-color: teal;

.advanced-border {
	border-right: $border-width $border-style $border-color;
}