CSSで枠線をグラデーションで装飾

CSSのみで枠線をグラデーションで装飾するには、次の方法で可能です。

背景と疑似要素を使用した方法
疑似要素を使用した方法
SVGと疑似要素を使用した方法
border-imageプロパティを使用した方法

背景と疑似要素を使用した方法

背景と疑似要素を使用した方法です。

※ IE10、IE11に対応
※ 上下、左右方向のグラデーションに対応
※ 斜め方向のグラデーションに対応
※ コンテンツ領域の背景は透明に非対応
※ 角丸に対応

デモ

CSS

疑似要素を使用した方法

疑似要素を使用した方法です。

※ IE10、IE11に対応
※ 上下、左右方向のグラデーションに対応
※ 斜め方向のグラデーションに非対応
※ コンテンツ領域の背景は透明に対応
※ 角丸は非対応

デモ

CSS

SVGと疑似要素を使用した方法

SVGと疑似要素を使用した方法です。

※ IE9、IE10、IE11に対応
※ 上下、左右方向のグラデーションに対応
※ 斜め方向のグラデーションに非対応
※ コンテンツ領域の背景は透明に対応
※ 角丸は非対応

デモ

CSS

div.sample {
									position:relative;
									border-left:2px solid #d00;
									border-right:2px solid #00d;
									padding:10px;
									width:300px;
									background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='2' viewBox='0 0 48 2'%3E%3ClinearGradient id='gradient' y1='1' x2='48' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23d00'/%3E%3Cstop offset='1' stop-color='%2300d'/%3E%3C/linearGradient%3E%3Crect style='fill:url(%23gradient);' width='48' height='2'/%3E%3C/svg%3E") no-repeat;
									background-size:100% 2px;
									text-align:center;
								}

div.sample::before {
										position:absolute;
										bottom:0;
										left:0;
										width:100%;
										height:2px;
										background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='2' viewBox='0 0 48 2'%3E%3ClinearGradient id='gradient' y1='1' x2='48' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23d00'/%3E%3Cstop offset='1' stop-color='%2300d'/%3E%3C/linearGradient%3E%3Crect style='fill:url(%23gradient);' width='48' height='2'/%3E%3C/svg%3E") no-repeat;
										background-size:100% 2px;
										content:"";
									}

border-imageプロパティを使用した方法

border-imageプロパティを使用した方法です。

※ IE11に対応
※ 上下、左右方向のグラデーションに対応
※ 斜め方向のグラデーションに対応
※ コンテンツ領域の背景は透明に対応
※ 角丸は非対応

デモ

CSS