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.

Framing an image with pure CSS

You don't need a photo editor to put a clean frame, rounded corners, or a soft drop shadow on an image — modern CSS does all of it, and the styles travel with your page so they stay crisp at any size. The catch is that the properties involved (border, border-radius, padding, box-shadow, outline) interact in ways that are hard to picture in your head. This generator lets you upload an image (or use a sample), adjust each property with a slider or color picker, and watch the result update live. When it looks right, it hands you the exact CSS to paste onto your own <img>.

The four layers it builds, and how they differ

Property	What it adds	Affects layout size?
`border`	A visible edge in your chosen width, style, and color	Yes — adds to the box
`padding`	Space between the border and the image — a "matte"	Yes — adds to the box
`box-shadow`	A soft shadow offset, blurred, and spread behind the image	No — painted outside
`outline`	A second line drawn outside the border at an offset	No — painted outside

The interplay worth understanding is between padding and border. Because the image sits inside the padding, and the border wraps the padding, adding padding creates a colored mat around the photo — like the cardboard border in a picture frame. The mat's color is whatever background the element shows through, which is why the preview includes a background-color picker: it's the matte color you'll see between image and border.

A worked example

Start with a solid border 4px wide in blue, a 12px corner radius, 8px of padding, and a shadow offset 4px right and 4px down with 16px of blur at 30% opacity. The tool assembles:

img {
  border: 4px solid #3b82f6;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 4px 4px 16px 0px rgba(59,130,246,...);
}

Note how the shadow is written: the four numbers are horizontal offset, vertical offset, blur, and spread. The tool converts your picked color and opacity slider into an rgba() value so the shadow can be semi-transparent — a flat opaque shadow almost always looks artificial, whereas 20–40% opacity reads as a natural cast.

The border styles, decoded

The style dropdown isn't just solid. dashed and dotted give a casual, sketchy edge. double draws two parallel lines. The four that surprise people are ridge, groove, inset, and outset: these use light and dark shading derived from your border color to fake a 3D bevel, so the frame appears raised or carved. They need a reasonably thick border (try 6px or more) to read clearly — at 1–2px they look almost identical to solid.

Genuine use cases

Polishing blog and article images. A subtle radius and soft shadow lifts a screenshot off a white page without heavy editing.
Building a consistent gallery. Copy one CSS rule and apply it to every thumbnail so the whole grid matches.
Designing avatars and cards. A large radius plus a thin border is the recipe for a clean profile image; the live preview lets you dial it in.
Prototyping quickly. Try a dozen frame looks in seconds and grab the winner's CSS, instead of round-tripping through design software.

Common mistakes

Forgetting the border eats layout space. A 30px border on both sides makes the image 60px larger overall, which can break a tight grid. Use box-shadow or outline when you need decoration without resizing.
Square shadows on rounded images. box-shadow follows the border-radius, but outline traditionally does not — so an outline on a rounded image may show square corners. Prefer a border or shadow for rounded looks.
Opaque, hard shadows. Leaving shadow opacity near 100% with zero blur produces a harsh dark block. Soften it with blur and lower opacity for realism.
Over-radiusing. A radius larger than half the image's smallest side turns it into a circle or pill, which may not be what you wanted for a rectangular photo.

About the sample image and your uploads

One honesty note: the built-in "Use Sample" button loads a placeholder photo from an external image service (picsum.photos), so that single feature makes a network request to a third party. Your own uploads are different — they are read locally in the browser with the FileReader API and turned into an in-page data URL. That means an image you upload is never sent to any server, and the generated CSS is assembled entirely on your device. If you want zero external requests, upload your own image instead of using the sample.