CSS Shape Generator
Generate CSS border-radius for rounded shapes and pure CSS triangles. Live preview with copy-ready code.
CORNERS
Quick Shapes
About CSS Shape Generator
Generate CSS code for two fundamental CSS shapes: rounded corners using border-radius and pure CSS triangles using the border trick. Both techniques are widely used in UI design for buttons, cards, tooltips, and decorative elements.
How CSS Triangles Work
CSS triangles exploit the fact that element borders meet at angles. By setting an element to zero width and height and making three borders transparent while one is colored, the colored border appears as a triangle. No images or SVG needed.
Frequently Asked Questions
The CSS
border-radius property rounds the corners of an element. You can set all four corners at once or individually. Using 50% on a square element creates a perfect circle; 999px or a very large value creates a pill/stadium shape.CSS triangles are used as tooltip arrows, dropdown carets, decorative dividers, and speech bubble tails. They require no image assets and scale perfectly at any size.
Yes —
border-radius works on any HTML element. It applies to the element's background and border, but not to content that extends beyond the box unless you also add overflow: hidden.For simple directional arrows and carets, CSS triangles are lighter and require no extra files. For more complex shapes, rotated triangles, or when you need the triangle to be interactive with click areas, SVG is more flexible and accessible.