Skip to main content
CSS features/ Properties

Properties

border-shape practice questions

Defines a border path with one or two CSS basic shapes so borders, backgrounds, clipping, and shadows can follow non-rectangular geometry. This is experimental, so use it as a progressive enhancement.

Experimental

New or behind active implementation work. Check MDN and browser release notes before production use.

CSS-TricksMDN

Example

.chevron {
  --tip: 1.25rem;
  border: 0.2rem solid currentColor;
  border-shape: polygon( 0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100% );
}

Practice

20 quick questions

Choose one answer

Question 1

What does border-shape define when you give it a CSS <basic-shape>?

Question 2

How should you use border-shape in production while its support is experimental?

Question 3

What is the initial value of border-shape?

Question 4

How many shape definitions can one border-shape declaration accept?

Question 5

With one shape in border-shape, how is the visible border produced?

Question 6

What do two shapes mean in border-shape: <outer-shape> <inner-shape>?

Question 7

When one shape omits a geometry box, which reference box is used by default?

Question 8

When two shapes omit geometry boxes, what are their defaults?

Question 9

What does an optional <geometry-box> do in a border-shape value?

Question 10

Does a non-rectangular border-shape change the space the element occupies in layout?

Question 11

Will text inside an element automatically flow around its border-shape?

Question 12

What happens to border-radius when computed border-shape is not none?

Question 13

What does the inner border-shape do to overflowing content?

Question 14

How do box-shadow effects relate to a custom border-shape?

Question 15

Which declaration is a valid simple circular border shape?

Question 16

Why is shape() often easier than path() for a responsive border-shape?

Question 17

What maintainability limitation does path() have for this use case?

Question 18

Why can border-shape simplify a speech-bubble or tooltip component compared with only masking it?

Question 19

Which test is suitable before applying a border-shape-only enhancement?

Question 20

For a single shape, where do its stroke width and color come from?

Common mistakes

  • Shipping border-shape without a conventional fallback even though the property is experimental and not Baseline.
  • Expecting the shape to change the element layout box or automatically reflow its text.
  • Combining a non-none border-shape with border-radius and expecting both geometries to apply.
  • Using path() when shape() would make responsive percentages, calc(), and custom properties easier to maintain.