>s
+ :: The first (outer) shape defaults to the [=border box=],
+ and the second (inner) shape defaults to the [=padding box=].
+ This allows the 'border-width' properties to naturally affect the final shape.
-'border-shape' does not affect geometry or layout,
-which is still computed using the existing 'border-width' properties.
+
+Examples
-'border-shape' does not affect the flow of content inside the box.
-Note: An author can use 'border-shape' in tandem with 'shape-inside' to create effects that decorate the box and control its text flow at the same time.
+
+ Creating a circular border using stroke mode:
-The inner 'border-shape' clips the [=overflow=] content of the element, in the same manner as 'border-radius',
-as described in
corner clipping.
+
+ .circular-button {
+ width: 100px;
+ height: 100px;
+ border: 5px solid blue;
+ border-shape: circle(50%);
+ }
+
-Issue: how should this affect clipping replaced elements?
+ This creates a circular border with a 5px stroke width.
+
-An element's relevant side for border shape is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end=]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''.
- 1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=].
- 1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=].
- 1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=].
- 1. If |element|'s [=computed value|computed=] 'border-inline-end-style' is not ''border-style/none'', then return [=inline-end=].
- 1. Return [=block-start=].
-
+
+ Creating a diamond-shaped border using fill mode:
+
+
+ .diamond {
+ width: 200px;
+ height: 200px;
+ border: 10px solid crimson;
+ border-shape:
+ polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
+ polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%);
+ }
+
+
+ This creates a diamond border by defining outer and inner polygons.
+
+ Using a custom path shape:
+
+
+ .custom-shape {
+ border: 8px solid green;
+ border-shape: path('M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z');
+ }
+
+
+ This creates a heart-shaped border using an SVG path.
+
+ Combining 'border-shape' with different border widths:
+
+
+ .fancy-box {
+ width: 100px;
+ height: 100px;
+ border-top-width: 10px;
+ border-right-width: 5px;
+ border-bottom-width: 10px;
+ border-left-width: 5px;
+ border-style: solid;
+ border-color: purple;
+ border-shape: ellipse(50% 40%);
+ }
+
+
+ The [=relevant side for border shape=] determines which border width is used for the stroke.
+
+Interactions with Other Properties
+
+
+Interaction with 'border-radius' and 'corner-shape'
+
+ The 'border-shape' property is not compatible with 'border-radius' and 'corner-shape'.
+ When an element's [=computed value=] of 'border-shape' is not none,
+ its 'border-radius' is ignored, as if it was set to 0.
+ 'corner-shape' is implicitly ignored, as it can only work in tandem with 'border-radius'.
+
+ Note: Authors should use either 'border-shape' for custom shapes
+ or 'border-radius'/'corner-shape' for rectangular boxes with styled corners,
+ but not both simultaneously.
+
+
+Interaction with 'box-shadow'
+
+ An [=outer box-shadow=] follows the outside of the outer path,
+ and an [=inner box-shadow=] follows the inside of the inner path.
+ Both are rendered as a stroke, with a stroke width of spread * 2,
+ clipped by the border shape.
+
+
+
+ .shaped-shadow {
+ border-shape: circle(50%);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ }
+
+
+ The shadow follows the circular shape rather than a rectangular box.
+
+Interaction with Overflow and Clipping
+
+ The inner 'border-shape' clips the [=overflow=] content of the element,
+ in the same manner as 'border-radius',
+ as described in corner clipping.
+
+ Issue: how should this affect clipping replaced elements?
+
+
+Interaction with Layout
+
+ 'border-shape' does not affect geometry or layout,
+ which is still computed using the existing 'border-width' properties.
+ The shaped border is purely a visual effect.
+
+ 'border-shape' does not affect the flow of content inside the box.
+
+ Note: An author can use 'border-shape' in tandem with 'shape-inside'
+ to create effects that both decorate the box and control its text flow.
+
+
+Determining the Relevant Side
+
+
+ An element's relevant side for border shape is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end=]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''.
+ 1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=].
+ 1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=].
+ 1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=].
+ 1. If |element|'s [=computed value|computed=] 'border-inline-end-style' is not ''border-style/none'', then return [=inline-end=].
+ 1. Return [=block-start=].
+
+
+ Note: This algorithm ensures consistent behavior when multiple border sides have different styles or widths.
+ The first non-none border side (in logical order) determines the border characteristics
+ used for the shaped border.