What is the difference between border and outline in CSS?

A border is part of the box model and takes up space, pushing surrounding elements outward. An outline is drawn outside the border but does not affect layout — it overlaps the surrounding content. Outlines are great for adding a second decorative ring without changing the element's size.

How does border-radius work?

border-radius rounds the corners of the element's border box. A value of 50% on a square element produces a circle. Smaller values (e.g. 8px) give a subtle rounded-corner look. The radius applies to both the border and any background, but the image itself must have overflow:hidden set to be clipped to the rounded shape.

Can I use the generated CSS on any website?

Yes. The output is standard CSS that works in all modern browsers. Apply it to any element or a container . If you use border-radius with an image, set overflow: hidden on the same element so the image corners are clipped correctly.

What image formats can I upload?

The tool accepts any image format your browser supports: JPEG, PNG, GIF, WebP, SVG, and AVIF. The image is loaded locally in your browser — it is never uploaded to a server.

Design 無料サインアップ不要

CSS Image Border Generator

Visually design CSS borders, shadows, and frames for images and copy the code.

ツールを読み込み中…

このツールについて

The CSS Image Border Generator gives you a live canvas to craft the perfect frame for any image. Upload your own photo or use the built-in sample, then dial in every visual property: border style (solid, dashed, dotted, double, ridge, groove, inset, outset), color, width, and border-radius for rounded corners. Add a CSS box-shadow with full control over offset, blur, spread, and color. Layer a CSS outline outside the border for a double-frame look, and add inner padding to give your image breathing room. All changes reflect instantly in the preview. When you are happy, click Copy CSS to get a ready-to-paste stylesheet snippet.

使い方

1 Upload your own image or use the built-in sample image.
2 Choose a border style from the dropdown and set the width and color.
3 Adjust the border-radius slider to round the corners.
4 Enable the box-shadow toggle and tune the offset, blur, spread, and color.
5 Optionally enable an outline for a double-frame effect.
6 Click Copy CSS to copy the generated stylesheet to your clipboard.

このツールについて

使い方

よくある質問