CSSで写真にフレームをつけちゃおう！
そのままコピペしてつかっても、カスタマイズしてもOKです

デモページ

フレームのソース

HTMLは全部共通です！

<section>
	<p><img src="css-photo-frame.png" alt="フレームサンプル">
</section>

CSS：パターン1

p img{ padding:10px; border:1px #dcb89f solid; }

CSS：パターン2

p{
	width:600px;
	margin:0 auto;
	position: relative;
}
p::before,
p::after {
	content: "";
	width: 60px;
	height: 60px;
	position: absolute;
}
p::before {
	border-top: 2px solid #625569;
	border-left: 2px solid #dcb89f;
	top:-20px;
	left:-20px;
}
p::after {
	border-right: 2px solid #dcb89f;
	border-bottom: 2px solid #625569;
	bottom:-20px;
	right:-20px;
}

CSS：パターン3

p{
	width:600px;
	margin:0 auto;
	position: relative;
}
p::before,
p::after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
}
p::before {
	border-top: 30px solid #f0897f;
	border-right: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid #f0897f;
	top:-10px;
	left:-10px;
}
p::after {
	border-top: 30px solid transparent;
	border-right: 30px solid #f0897f;
	border-bottom: 30px solid #f0897f;
	border-left: 30px solid transparent;
	bottom:-10px;
	right:-10px;
}

CSS：パターン4

p{
	width:600px;
	margin:0 auto;
	position: relative;
}
p::before,
p::after {
	content: "";
	width: 100px;
	height: 100px;
	display:block;
	transform: rotate(-35deg);
	background: #fff;
	position: absolute;
	z-index: 1;
}
p::before {
	border-bottom: 1px solid #aaa;
	top:-70px;
	left:-50px;
}
p::after {
	border-top: 1px solid #aaa;
	bottom:-70px;
	right:-50px;
}

CSS：パターン5

p{
	width:600px;
	margin:0 auto;
	position: relative;
}
p::after {
	content: "";
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-image-source: repeating-linear-gradient(45deg, #fff 0, #fff 2px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 6px);
	border-width: 15px;
	border-image-slice: 20;
	border-image-repeat: round;
	border-style: solid;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

CSS：パターン6

p{
	width:600px;
	margin:0 auto;
	position: relative;
}
p::before{
	content:"";
	width: 100%;
	height: 100%;
	display:block;
	border:30px rgba( 0,0,0,.4 ) solid;
	box-sizing:border-box;
	position: absolute;
	top:0;
	left:0;
}
p::after{
	content:"";
	width: calc( 100% - 60px );
	height: calc( 100% - 60px );
	display:block;
	border:1px rgba( 255,255,255,.4 ) solid;
	box-sizing:border-box;
	position: absolute;
	top:30px;
	left:30px;
}

CSS：パターン7

p{
	width:600px;
	margin:0 auto;
	position: relative;
}
p::after {
	content: "";
	width: 100%;
	height: 100%;
	background-image: radial-gradient(#00aec9 30%, rgba(0, 174, 201, 0) 31%), radial-gradient(#00aec9 30%, rgba(0, 174, 201, 0) 31%);
	background-size: 6px 6px;
	background-position: 0 0, 3px 3px;
	position: absolute;
	bottom: -15px;
	right: -15px;
	z-index: -1;
}