Gerador de Bordas e Contornos CSS
Crie visualmente bordas, contornos e box-shadows CSS com prévia ao vivo e saída de código instantânea.
Sobre esta ferramenta
Um construtor visual para estilos de borda e contorno CSS. Controle largura, estilo, cor e border-radius por canto da borda, ou personalize cada lado (topo, direita, baixo, esquerda) individualmente. Adicione contornos com offset configurável e use box-shadow como alternativa de borda. A prévia ao vivo é atualizada instantaneamente e o CSS gerado está sempre pronto para copiar.
Como usar
- 1 Passo 1: Escolha entre o modo 'Todos os lados' ou 'Lados individuais' para controlar as bordas uniformemente ou por lado.
- 2 Passo 2: Ajuste a largura, estilo e cor da borda usando os controles, e defina o border-radius por canto ou uniformemente.
- 3 Passo 3: Ative as seções de Contorno ou Box Shadow para adicionar esses estilos ao seu elemento e configure suas opções.
- 4 Passo 4: Clique em 'Copiar CSS' para copiar o código CSS gerado, depois cole-o no seu projeto.
Three different ways to draw an edge
CSS gives you three distinct properties for putting an outline on a box, and this tool builds all three so you can see how they differ side by side: border, outline, and box-shadow. They look superficially similar but behave very differently, and choosing the wrong one is one of the most common sources of layout bugs. The whole point of this generator is to let you adjust values visually and copy the exact, correct CSS — including the per-side and per-corner shorthands that are tedious to write by hand.
How border, outline, and box-shadow actually differ
| Property | Takes up space? | Follows border-radius? | Per-side control? |
|---|---|---|---|
border | Yes — adds to the box's size | Yes | Yes (top/right/bottom/left) |
outline | No — drawn outside the box, ignores layout | No (traditionally rectangular) | No — all four sides together |
box-shadow | No — painted outside the box model | Yes | No, but supports blur, spread, and stacking |
The practical consequence: a 4px border makes an element 8px wider and taller (4px on each side), which can shift everything around it. An outline or box-shadow of the same thickness changes nothing about the layout — they are painted on top of, or outside, the box without reserving space. This is exactly why a focus ring is almost always an outline: it can appear and disappear as you tab through a form without making the page jump.
Building a border: width, style, color, radius
In All sides mode you set one width, one style, and one colour, producing the compact shorthand border: 2px solid #3b82f6;. Switch to Individual sides and each of the four edges gets its own controls, emitting border-top, border-right, and so on — useful for designs like a coloured left accent bar on a card. Eight border styles are available: solid, dashed, dotted, double, plus the four 3D-look styles groove, ridge, inset, and outset (whose effect depends on the border colour and is mostly a retro aesthetic).
Border radius rounds the corners. In "All" mode one slider rounds all four corners equally; in "Per corner" mode you set each corner independently, which generates the four-value shorthand. The order matters and is easy to get wrong by hand: border-radius reads top-left, top-right, bottom-right, bottom-left — clockwise from the top-left. The tool writes that order for you.
A worked example
Suppose you want a card with a solid blue border, gently rounded corners, and a soft drop shadow for depth. Set the border to width 2, style solid, colour #3b82f6. Set the radius slider to 12. Enable Box Shadow and dial in X offset 4, Y offset 4, blur 8, spread 0, with a semi-transparent black. The tool produces:
border: 2px solid #3b82f6;border-radius: 12px;box-shadow: 4px 4px 8px 0px #00000080;
Read the shadow's four numbers as horizontal offset, vertical offset, blur radius, and spread. The #00000080 colour is black at 50% opacity — the tool builds that alpha from the opacity slider, appending the hex alpha pair (80 ≈ 50%) to the chosen colour. Tick Inset and the same shadow is painted inside the box instead, giving a pressed or recessed look.
Understanding outline-offset
The outline section adds an outline plus an outline-offset. Offset is the gap between the element's edge and its outline: a positive value pushes the outline outward, away from the box, creating a halo with a visible gap; a negative value pulls it inward, over the element's own edge. Because the outline does not affect layout, increasing the offset never disturbs surrounding content — it just expands the ring.
Tips and common mistakes
- Don't use border for focus states. A border resizes the element when it appears, jolting the layout. Use outline (or box-shadow) for focus and hover rings so nothing shifts.
- Outline corners stay square. Even with a rounded
border-radius, a traditional outline is drawn as a rectangle and will not follow the curve. If you need a rounded ring, reach for box-shadow with zero blur and some spread instead. - Box-shadow is a layout-free border substitute. A trick worth knowing:
box-shadow: 0 0 0 2px #3b82f6;— zero offset, zero blur, 2px spread — draws what looks like a 2px border that adds no size and respects border-radius. The generator's spread control lets you build exactly that. - Watch the shorthand order on per-corner radius. If your rounded corners end up on the wrong side, you have almost certainly typed the values in the wrong sequence by hand; the per-corner mode here labels each input so the output is correct.
- Match the style to the colour. The 3D styles (
groove,ridge,inset,outset) derive their highlight and shadow from the border colour. They look broken on a pure black or white border and only show their bevel effect with a mid-tone colour.
Privacy note
This generator runs entirely in your browser. It computes the CSS and updates the live preview locally; nothing you type or design is sent to a server, so it works fully offline.