画像のフレーム作成
写真の周りに装飾的なフレームを追加します — 実線、破線、点線、二重線から選べ、角丸と影も設定可能。すべてブラウザ内で処理されます。
入力
Drop an image or browse
One file · image
ブラウザ内で完全に処理されます — 画像はサーバーにアップロードされることはありません。
写真を囲むフレームの太さです。
写真とフレームの角を丸くします。
やわらかい影で、フレーム付きの写真を背景から浮き上がらせます。
出力
結果
Your edited image will appear here.
SVGソース
役に立ちましたか？
このツールを使う他の方法
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/imagekit/image-border/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="画像のフレーム作成 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
次の方法でも利用可能
ガイド
任意の写真の周りに装飾的なフレームを追加できます。スタイル、色、太さを選び、フレーム付きの結果をダウンロードしてください。すべてブラウザ内で即座にレンダリングされ、サーバーにアップロードされることはありません。
使い方
画像をアップロードし、フレームを好みに合わせて調整します。
- フレームの幅 — 写真を囲むフレームの太さです。
- フレームの色 — フレームの色です。任意の16進数値またはカラーピッカーで指定できます。
- フレームのスタイル — 実線（塗りつぶされた平らなフレーム）、破線、点線、二重線から選べます。CSSの
border-styleと同じスタイルです。 - 角丸の半径 — 写真と外側のフレームの両方の角を丸くします。0のままにすると角は直角のままです。
- ドロップシャドウを追加 — やわらかい影でフレーム付きの写真をページから浮き上がらせます。色や模様のある背景に配置するときに便利です。
コントロールを動かすと、結果がすぐに表示されます。結果はSVGファイルとしてダウンロードするか、マークアップのソースを直接コピーできます。
ヒント
- 破線と点線は、フレームの幅が中〜大（30px以上）のときに最も効果的です。非常に細い幅では、線のパターンが小さすぎて見分けにくくなります。
- 二重線はフレームの幅を、間に隙間を挟んだ2本の細い線に分けるため、存在感を出すには実線より太い幅が必要です。60px以上を試してみてください。
- ダウンロードしたSVGは、元の画像をベクターで包んだものなので、どのサイズに拡大縮小しても画質が落ちません。ラスター画像の書き出しとは違い、きれいなまま使えます。
- 角丸の半径とドロップシャドウを組み合わせると、カード風の見た目になります。ウェブサイトのモックアップやSNS投稿などに便利です。
imageborderframephoto effectpicture framephoto border