EspañolCSS corner ribbon and badge
Choose the style, the text and the corner. The ribbon is made with a single element and adapts to the text length.
How to use"Best seller" in the corner of the card
Available in: 
CSS corner ribbon and badge: what it is for
A corner ribbon highlights the most popular plan, a new product or a sale without changing the rest of the card. Choose from a diagonal ribbon, round badge, tag or folded band, the text, the corner, the colors and the size.
The code comes with the sample card and the ribbon CSS, made with a single element: for the diagonal one, the card clips the excess with overflow hidden. The preview updates instantly, and the page explains when to use each style.
How to use
- Choose the style and the text.
- Adjust the corner, colors and size.
- Copy the code.
When to use it
- Highlighted plan in a pricing table.
- New or discounted product.
- Discount badge on photos.
Frequently asked questions
How is the ribbon cut off at the corner?
The card gets overflow: hidden and position: relative. The ribbon is an element rotated 45 degrees and placed in the corner; the part that goes outside the card is hidden, leaving only the diagonal band.
Do screen readers read the ribbon?
Yes, because the text is in the HTML. If the badge only repeats something already on the card, you can mark it with aria-hidden="true" so it is not announced twice.
Which style should I use?
The diagonal ribbon draws the most attention and suits highlighted plans. The round badge is good for discounts ('-20%') on product photos, and the tag is the most discreet, good for lists with many items.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.