Cortador de Cantos CSS
Gere uma declaração CSS clip-path/mask que corta, entainha ou escava cada canto de uma caixa de forma independente — por canto ou estilo e tamanho vinculados, em px ou %, com visualização ao vivo.
Entrada
Unidade de tamanho para cada corte de canto abaixo.
Quando ativado, o estilo e o tamanho Todos os Cantos aplicam-se a cada canto.
Tamanhos em percentual acima de 50 são limitados para que os cantos opostos não se sobreponham.
Saída
Sua caixa com cantos cortados aparecerá aqui.
div com estilos inline correspondentes à visualização acima — cole em qualquer lugar.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-corner-cutter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"unit": "px",
"linked": "true",
"allStyle": "bevel",
"allSize": "24"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-corner-cutter` tool (CSS Corner Cutter) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-corner-cutter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Cortador de Cantos CSS — 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>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que é um canto "cortado"?
border-radius só produz cantos suavemente arredondados. Um canto cortado é diferente — ele remove um pedaço do material da caixa em vez de arredondá-lo, e existem três formas comuns para esse pedaço:
- Bisel — uma única linha angular, a aparência clássica de "canto recortado" em cartões, botões e etiquetas de preço.
- Entalhe — um corte em ângulo reto, dando uma silhueta de aba/toco de ingresso com cantos quadrados.
- Escavação — um arco côncavo que se curva para dentro do canto, como uma mordida tirada dele.
Esta ferramenta constrói uma declaração CSS pronta para colar para qualquer combinação dos três, independentemente por canto, com uma visualização ao vivo.
Como usar esta ferramenta
- Escolha uma Unidade (
pxou%) — ela se aplica ao tamanho de cada canto abaixo. - Deixe Mesmo para todos os cantos ligado para definir um Estilo e Tamanho para os quatro cantos de uma vez, ou desligue para definir cada canto (Canto Superior Esquerdo, Canto Superior Direito, Canto Inferior Direito, Canto Inferior Esquerdo) independentemente — misture biseis, entalhes e escavações livremente, ou deixe o tamanho de um canto em
0para mantê-lo quadrado. - Copie o CSS e aplique a qualquer elemento com largura/altura definida. A Visualização mostra exatamente como fica; o Trecho HTML abaixo é a mesma marcação que um
<div>auto-contido com estilos inline que você pode colar em qualquer lugar onde uma folha de estilos não seja conveniente.
Por que duas técnicas CSS diferentes?
Bisel e entalhe são ambos feitos de linhas retas, então são expressos como pontos extras em um clip-path: polygon(...) — a mesma técnica por trás da biblioteca de formas do Gerador de Clip-Path CSS. Uma escavação é diferente: clip-path polygon() pode apenas desenhar bordas retas entre pontos, portanto não há como curvar uma para dentro com um arco suave. Esculpir uma curva côncava requer um mask-image construído a partir de radial-gradients — um por canto, transparente dentro do raio de corte e opaco fora. Como clip-path e mask são propriedades independentes que se aplicam ao mesmo elemento, esta ferramenta emite ambos os blocos juntos sempre que você mistura cortes retos em alguns cantos com uma escavação em outros; o navegador renderiza sua interseção.
FAQ
Isso funcionará em todos os navegadores?
clip-path: polygon() e mask-image são amplamente suportados nos navegadores Chrome, Firefox, Safari e Edge atuais. O CSS gerado sempre inclui a forma prefixada com -webkit- de qualquer propriedade usada, pois Safari historicamente precisou dela para mask-image.
Por que minha escavação dimensionada em percentual é menor do que esperava?
Os tamanhos em percentual são limitados a 50 para que os cortes dos cantos opostos não se sobreponham.
Quero apenas cantos arredondados simples, não um corte — o que devo usar?
Isso é border-radius, não um corte — use o Gerador de Border Radius em vez disso. Se você estiver arredondando os cantos de uma imagem real que fez upload (em vez de gerar CSS para uma caixa ao vivo), use Round Corners.
Privacidade
Tudo acontece no seu navegador. Seus estilos e tamanhos escolhidos nunca são enviados para um servidor — o CSS e a visualização são gerados e atualizados localmente conforme você ajusta os controles.