Defines an arbitrary shape for the element's border — instead of the default rectangular border, any basic shape (polygon, circle, path, etc.) can be used. The border is rendered along the defined shape's path and clips the inner content accordingly.border-shape: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);border: 4px solid navy;
border-shape: path('M 0,0 L 200,0 L 200,150 Q 200,200 150,200 L 0,200 Z');noneDefault value — no special shape is applied to the border. The element displays a standard rectangular border according to its current border-radius and corner-shape values.border-boxThe reference box for the shape is the element's border-box.content-boxThe reference box for the shape is the element's content-box.fill-boxThe reference box for the shape is the fill-box (SVG object bounding box).margin-boxThe reference box for the shape is the element's margin-box.padding-boxThe reference box for the shape is the element's padding-box.stroke-boxThe reference box for the shape is the stroke-box (SVG stroke bounding box).view-boxThe reference box for the shape is the view-box (SVG — nearest SVG viewport).reference boxGeneric reference box that defines the coordinate system for the border shape.equivalent pathAn equivalent path describing the current border shape as an SVG path.polygon()Defines a border in the shape of a polygon by specifying a list of (x, y) coordinate points. The border is drawn along the edges connecting those points.circle()Defines a border in the shape of a circle with a specified radius and center point. The border is drawn along the circumference of the circle.ellipse()Defines a border in the shape of an ellipse with two radii and a specified center point. The border is drawn along the circumference of the ellipse.inset()Defines a border in the shape of a rectangle inset from each side, with optional rounded corners. Useful for creating rectangular borders that are offset inward from the element's edges.path()Defines a border in the shape of an arbitrary SVG path. Provides maximum flexibility for creating borders in any shape expressible in SVG path syntax.shape()Defines a border shape using CSS path commands (move-to, line-to, arc, etc.). A modern CSS-native version of path() with support for CSS units and percentages.CSS Borders and Box Decorations Module Level 4W3C Working Draft (26 March 2026)none W3CShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
