A card can have the same corner radius yet look softly rounded, sharply bevelled, scooped inward or shaped like a squircle. CSS corner-shape separates the size of the corner region from the curve drawn inside it.

In the current CSS Borders and Box Decorations Level 4 draft, corner-shape uses round, scoop, bevel, notch, square, squircle or superellipse() values. The initial value is round, it is not inherited, and a non-zero border-radius is needed before the shape has a visible corner area.

This guide teaches the keywords, superellipse parameter, shorthand order, physical and logical longhands, interpolation, borders, overflow, shadows and progressive enhancement without claiming universal browser support.

Punggol families can use this guide in short sessions around homework, CCAs and rest. The examples are proposed learning activities. They do not claim a physical tuition branch, timetable, fee, class size, school relationship or guaranteed result.

Use disposable data and repositories, preserve backups and check version-sensitive details against the linked primary source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.

corner-shape selects the curve drawn within the corner area established by border-radius. That is the invariant to preserve when names, data or surrounding project details change.

One property defines the region while the other defines the curve. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is treating corner-shape as a replacement for border-radius size. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.card{border-radius:2rem;corner-shape:squircle}

Read the trace, not just the last line

Trace radius region then curve selection. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “corner-shape works inside the border-radius region”, separate contract from coincidence. The contract is “corner-shape selects the curve drawn within the corner area established by border-radius.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Build two same-size cards with different corner-shape values.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “corner-shape works inside the border-radius region” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape selects the curve drawn within the corner area established by border-radius.” should remain invariant and what observation would expose treating corner-shape as a replacement for border-radius size.

Case 2: CCA schedule card. Contrast “corner-shape works inside the border-radius region” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape selects the curve drawn within the corner area established by border-radius.” should remain invariant and what observation would expose treating corner-shape as a replacement for border-radius size.

Case 3: science-method accordion. Stress-test “corner-shape works inside the border-radius region” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape selects the curve drawn within the corner area established by border-radius.” should remain invariant and what observation would expose treating corner-shape as a replacement for border-radius size.

Case 4: revision navigation panel. Explain “corner-shape works inside the border-radius region” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape selects the curve drawn within the corner area established by border-radius.” should remain invariant and what observation would expose treating corner-shape as a replacement for border-radius size.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals treating corner-shape as a replacement for border-radius size.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Build two same-size cards with different corner-shape values.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “corner-shape works inside the border-radius region”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests corner-shape selects the curve drawn within the corner area established by border-radius.?”, and “Can you make a smaller example of treating corner-shape as a replacement for border-radius size?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare round and squircle at 2rem. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Set radius and shape deliberately. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “corner-shape works inside the border-radius region” means the learner can predict the ordinary case, recognise treating corner-shape as a replacement for border-radius size, diagnose the earliest mistaken assumption, recover with “Build two same-size cards with different corner-shape values.” and defend this decision: Set radius and shape deliberately. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect. That is the invariant to preserve when names, data or surrounding project details change.

The shape needs geometric room in which to render. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is diagnosing an unsupported browser before noticing radius zero. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{border-radius:0;corner-shape:notch}

Read the trace, not just the last line

Trace computed shape and zero-sized corner region. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “A zero radius leaves no visible shape area”, separate contract from coincidence. The contract is “If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Toggle only border-radius in a controlled fixture.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “A zero radius leaves no visible shape area” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect.” should remain invariant and what observation would expose diagnosing an unsupported browser before noticing radius zero.

Case 2: CCA schedule card. Contrast “A zero radius leaves no visible shape area” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect.” should remain invariant and what observation would expose diagnosing an unsupported browser before noticing radius zero.

Case 3: science-method accordion. Stress-test “A zero radius leaves no visible shape area” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect.” should remain invariant and what observation would expose diagnosing an unsupported browser before noticing radius zero.

Case 4: revision navigation panel. Explain “A zero radius leaves no visible shape area” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect.” should remain invariant and what observation would expose diagnosing an unsupported browser before noticing radius zero.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals diagnosing an unsupported browser before noticing radius zero.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Toggle only border-radius in a controlled fixture.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “A zero radius leaves no visible shape area”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests If border-radius is omitted or zero, the corner area is zero-sized and corner-shape has no visible effect.?”, and “Can you make a smaller example of diagnosing an unsupported browser before noticing radius zero?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Predict notch with radius zero. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Check radius before compatibility debugging. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “A zero radius leaves no visible shape area” means the learner can predict the ordinary case, recognise diagnosing an unsupported browser before noticing radius zero, diagnose the earliest mistaken assumption, recover with “Toggle only border-radius in a controlled fixture.” and defend this decision: Check radius before compatibility debugging. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The initial corner-shape value is round, matching traditional border-radius behaviour. That is the invariant to preserve when names, data or surrounding project details change.

The initial value preserves established rendering. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming a new draft property changes existing rounded corners by default. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{border-radius:2rem}

Read the trace, not just the last line

Trace initial value and visible curve. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “round is the initial value”, separate contract from coincidence. The contract is “The initial corner-shape value is round, matching traditional border-radius behaviour.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Compare omitted corner-shape with explicit round.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “round is the initial value” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The initial corner-shape value is round, matching traditional border-radius behaviour.” should remain invariant and what observation would expose assuming a new draft property changes existing rounded corners by default.

Case 2: CCA schedule card. Contrast “round is the initial value” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The initial corner-shape value is round, matching traditional border-radius behaviour.” should remain invariant and what observation would expose assuming a new draft property changes existing rounded corners by default.

Case 3: science-method accordion. Stress-test “round is the initial value” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The initial corner-shape value is round, matching traditional border-radius behaviour.” should remain invariant and what observation would expose assuming a new draft property changes existing rounded corners by default.

Case 4: revision navigation panel. Explain “round is the initial value” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The initial corner-shape value is round, matching traditional border-radius behaviour.” should remain invariant and what observation would expose assuming a new draft property changes existing rounded corners by default.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming a new draft property changes existing rounded corners by default.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Compare omitted corner-shape with explicit round.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “round is the initial value”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The initial corner-shape value is round, matching traditional border-radius behaviour.?”, and “Can you make a smaller example of assuming a new draft property changes existing rounded corners by default?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Predict the two cards. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Keep round as the reliable baseline. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “round is the initial value” means the learner can predict the ordinary case, recognise assuming a new draft property changes existing rounded corners by default, diagnose the earliest mistaken assumption, recover with “Compare omitted corner-shape with explicit round.” and defend this decision: Keep round as the reliable baseline. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The squircle keyword corresponds to superellipse(2), a convex curve between round and square. That is the invariant to preserve when names, data or surrounding project details change.

The keyword has a defined parameter, not a vague visual label. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is calling every soft rectangle a mathematically identical squircle. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.card{border-radius:3rem;corner-shape:squircle}

Read the trace, not just the last line

Trace keyword to superellipse parameter to curve. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “squircle is more square than round”, separate contract from coincidence. The contract is “The squircle keyword corresponds to superellipse(2), a convex curve between round and square.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Render round, squircle and square at the same radius.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “squircle is more square than round” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The squircle keyword corresponds to superellipse(2), a convex curve between round and square.” should remain invariant and what observation would expose calling every soft rectangle a mathematically identical squircle.

Case 2: CCA schedule card. Contrast “squircle is more square than round” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The squircle keyword corresponds to superellipse(2), a convex curve between round and square.” should remain invariant and what observation would expose calling every soft rectangle a mathematically identical squircle.

Case 3: science-method accordion. Stress-test “squircle is more square than round” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The squircle keyword corresponds to superellipse(2), a convex curve between round and square.” should remain invariant and what observation would expose calling every soft rectangle a mathematically identical squircle.

Case 4: revision navigation panel. Explain “squircle is more square than round” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The squircle keyword corresponds to superellipse(2), a convex curve between round and square.” should remain invariant and what observation would expose calling every soft rectangle a mathematically identical squircle.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals calling every soft rectangle a mathematically identical squircle.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Render round, squircle and square at the same radius.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “squircle is more square than round”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The squircle keyword corresponds to superellipse(2), a convex curve between round and square.?”, and “Can you make a smaller example of calling every soft rectangle a mathematically identical squircle?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Order the visual squareness. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use the keyword when its defined curve fits the design. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “squircle is more square than round” means the learner can predict the ordinary case, recognise calling every soft rectangle a mathematically identical squircle, diagnose the earliest mistaken assumption, recover with “Render round, squircle and square at the same radius.” and defend this decision: Use the keyword when its defined curve fits the design. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model. That is the invariant to preserve when names, data or surrounding project details change.

Shape and radius remain separate inputs. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming border-radius must be zero to display a square-shaped endpoint. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{border-radius:2rem;corner-shape:square}

Read the trace, not just the last line

Trace visible similarity and different authored state. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “square preserves the radius region for interpolation”, separate contract from coincidence. The contract is “The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Compare square with radius zero and with non-zero radius.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “square preserves the radius region for interpolation” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model.” should remain invariant and what observation would expose assuming border-radius must be zero to display a square-shaped endpoint.

Case 2: CCA schedule card. Contrast “square preserves the radius region for interpolation” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model.” should remain invariant and what observation would expose assuming border-radius must be zero to display a square-shaped endpoint.

Case 3: science-method accordion. Stress-test “square preserves the radius region for interpolation” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model.” should remain invariant and what observation would expose assuming border-radius must be zero to display a square-shaped endpoint.

Case 4: revision navigation panel. Explain “square preserves the radius region for interpolation” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model.” should remain invariant and what observation would expose assuming border-radius must be zero to display a square-shaped endpoint.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming border-radius must be zero to display a square-shaped endpoint.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Compare square with radius zero and with non-zero radius.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “square preserves the radius region for interpolation”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The square keyword corresponds to superellipse(infinity), creating a convex right-angle shape inside the corner model.?”, and “Can you make a smaller example of assuming border-radius must be zero to display a square-shaped endpoint?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Animate from round to square in supporting conditions. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Choose based on state model as well as static appearance. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “square preserves the radius region for interpolation” means the learner can predict the ordinary case, recognise assuming border-radius must be zero to display a square-shaped endpoint, diagnose the earliest mistaken assumption, recover with “Compare square with radius zero and with non-zero radius.” and defend this decision: Choose based on state model as well as static appearance. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner. That is the invariant to preserve when names, data or surrounding project details change.

The keyword keeps the result in the border-corner system. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is using clip-path automatically when the native corner model suffices. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.tag{border-radius:1.5rem;corner-shape:bevel}

Read the trace, not just the last line

Trace radius dimensions and diagonal edge. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “bevel is the flat diagonal midpoint”, separate contract from coincidence. The contract is “The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Compare bevel with a polygon only for an explicit design need.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “bevel is the flat diagonal midpoint” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner.” should remain invariant and what observation would expose using clip-path automatically when the native corner model suffices.

Case 2: CCA schedule card. Contrast “bevel is the flat diagonal midpoint” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner.” should remain invariant and what observation would expose using clip-path automatically when the native corner model suffices.

Case 3: science-method accordion. Stress-test “bevel is the flat diagonal midpoint” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner.” should remain invariant and what observation would expose using clip-path automatically when the native corner model suffices.

Case 4: revision navigation panel. Explain “bevel is the flat diagonal midpoint” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner.” should remain invariant and what observation would expose using clip-path automatically when the native corner model suffices.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals using clip-path automatically when the native corner model suffices.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Compare bevel with a polygon only for an explicit design need.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “bevel is the flat diagonal midpoint”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The bevel keyword corresponds to superellipse(0), producing a straight diagonal corner.?”, and “Can you make a smaller example of using clip-path automatically when the native corner model suffices?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Predict a larger radius. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use bevel when border, background and corner behaviour should stay integrated. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “bevel is the flat diagonal midpoint” means the learner can predict the ordinary case, recognise using clip-path automatically when the native corner model suffices, diagnose the earliest mistaken assumption, recover with “Compare bevel with a polygon only for an explicit design need.” and defend this decision: Use bevel when border, background and corner behaviour should stay integrated. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse. That is the invariant to preserve when names, data or surrounding project details change.

Concave geometry can expose more of the surrounding background. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is using scoop without checking content and background contrast. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.ticket{border-radius:1.5rem;corner-shape:scoop}

Read the trace, not just the last line

Trace negative parameter and concave curve. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “scoop creates a concave curve”, separate contract from coincidence. The contract is “The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Test on plain backgrounds before decorative layers.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “scoop creates a concave curve” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse.” should remain invariant and what observation would expose using scoop without checking content and background contrast.

Case 2: CCA schedule card. Contrast “scoop creates a concave curve” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse.” should remain invariant and what observation would expose using scoop without checking content and background contrast.

Case 3: science-method accordion. Stress-test “scoop creates a concave curve” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse.” should remain invariant and what observation would expose using scoop without checking content and background contrast.

Case 4: revision navigation panel. Explain “scoop creates a concave curve” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse.” should remain invariant and what observation would expose using scoop without checking content and background contrast.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals using scoop without checking content and background contrast.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Test on plain backgrounds before decorative layers.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “scoop creates a concave curve”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The scoop keyword corresponds to superellipse(-1), producing a concave quarter-ellipse.?”, and “Can you make a smaller example of using scoop without checking content and background contrast?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare round and scoop. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use concave shapes where the boundary remains legible. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “scoop creates a concave curve” means the learner can predict the ordinary case, recognise using scoop without checking content and background contrast, diagnose the earliest mistaken assumption, recover with “Test on plain backgrounds before decorative layers.” and defend this decision: Use concave shapes where the boundary remains legible. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The notch keyword corresponds to superellipse(-infinity). That is the invariant to preserve when names, data or surrounding project details change.

Bevel cuts diagonally across a convex corner region; notch cuts inward with a right angle. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is confusing notch with bevel. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.coupon{border-radius:1rem;corner-shape:notch}

Read the trace, not just the last line

Trace parameter 0 versus negative infinity. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “notch creates a concave right angle”, separate contract from coincidence. The contract is “The notch keyword corresponds to superellipse(-infinity).” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Place bevel and notch beside each other.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “notch creates a concave right angle” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The notch keyword corresponds to superellipse(-infinity).” should remain invariant and what observation would expose confusing notch with bevel.

Case 2: CCA schedule card. Contrast “notch creates a concave right angle” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The notch keyword corresponds to superellipse(-infinity).” should remain invariant and what observation would expose confusing notch with bevel.

Case 3: science-method accordion. Stress-test “notch creates a concave right angle” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The notch keyword corresponds to superellipse(-infinity).” should remain invariant and what observation would expose confusing notch with bevel.

Case 4: revision navigation panel. Explain “notch creates a concave right angle” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The notch keyword corresponds to superellipse(-infinity).” should remain invariant and what observation would expose confusing notch with bevel.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals confusing notch with bevel.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Place bevel and notch beside each other.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “notch creates a concave right angle”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The notch keyword corresponds to superellipse(-infinity).?”, and “Can you make a smaller example of confusing notch with bevel?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Name the boundary direction. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Choose from geometry, not keyword sound. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “notch creates a concave right angle” means the learner can predict the ordinary case, recognise confusing notch with bevel, diagnose the earliest mistaken assumption, recover with “Place bevel and notch beside each other.” and defend this decision: Choose from geometry, not keyword sound. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords. That is the invariant to preserve when names, data or surrounding project details change.

The specification maps K through 2^K. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is treating K as the exponent itself. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{border-radius:2rem;corner-shape:superellipse(.5)}

Read the trace, not just the last line

Trace authored K, exponent and curve family. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “superellipse exposes the continuous parameter”, separate contract from coincidence. The contract is “superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Build a small labelled sequence of K values.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “superellipse exposes the continuous parameter” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords.” should remain invariant and what observation would expose treating K as the exponent itself.

Case 2: CCA schedule card. Contrast “superellipse exposes the continuous parameter” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords.” should remain invariant and what observation would expose treating K as the exponent itself.

Case 3: science-method accordion. Stress-test “superellipse exposes the continuous parameter” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords.” should remain invariant and what observation would expose treating K as the exponent itself.

Case 4: revision navigation panel. Explain “superellipse exposes the continuous parameter” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords.” should remain invariant and what observation would expose treating K as the exponent itself.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals treating K as the exponent itself.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Build a small labelled sequence of K values.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “superellipse exposes the continuous parameter”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests superellipse(K) defines the exponent as two raised to K and supports values beyond the named keywords.?”, and “Can you make a smaller example of treating K as the exponent itself?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Evaluate K=1 and K=2. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use named keywords unless a custom curve is justified. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “superellipse exposes the continuous parameter” means the learner can predict the ordinary case, recognise treating K as the exponent itself, diagnose the earliest mistaken assumption, recover with “Build a small labelled sequence of K values.” and defend this decision: Use named keywords unless a custom curve is justified. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary. That is the invariant to preserve when names, data or surrounding project details change.

Negative parameters intentionally define the concave side of the family. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming negative values are invalid. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.a{corner-shape:superellipse(1)}
.b{corner-shape:superellipse(0)}
.c{corner-shape:superellipse(-1)}

Read the trace, not just the last line

Trace sign and curve direction. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Positive and negative parameters change convexity”, separate contract from coincidence. The contract is “Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Keep radius, size and border constant across the comparison.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Positive and negative parameters change convexity” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary.” should remain invariant and what observation would expose assuming negative values are invalid.

Case 2: CCA schedule card. Contrast “Positive and negative parameters change convexity” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary.” should remain invariant and what observation would expose assuming negative values are invalid.

Case 3: science-method accordion. Stress-test “Positive and negative parameters change convexity” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary.” should remain invariant and what observation would expose assuming negative values are invalid.

Case 4: revision navigation panel. Explain “Positive and negative parameters change convexity” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary.” should remain invariant and what observation would expose assuming negative values are invalid.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming negative values are invalid.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Keep radius, size and border constant across the comparison.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Positive and negative parameters change convexity”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests Positive K values produce convex families while negative values define concave curves; zero is the bevel boundary.?”, and “Can you make a smaller example of assuming negative values are invalid?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Order the examples. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Vary one parameter at a time. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Positive and negative parameters change convexity” means the learner can predict the ordinary case, recognise assuming negative values are invalid, diagnose the earliest mistaken assumption, recover with “Keep radius, size and border constant across the comparison.” and defend this decision: Vary one parameter at a time. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners. That is the invariant to preserve when names, data or surrounding project details change.

Corner shorthands follow the familiar clockwise expansion. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is reading the values as top, bottom, left, right. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{corner-shape:round bevel scoop notch}

Read the trace, not just the last line

Trace first through fourth value to physical corner. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “The shorthand accepts one to four values”, separate contract from coincidence. The contract is “corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Label every corner in a visible fixture.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “The shorthand accepts one to four values” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners.” should remain invariant and what observation would expose reading the values as top, bottom, left, right.

Case 2: CCA schedule card. Contrast “The shorthand accepts one to four values” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners.” should remain invariant and what observation would expose reading the values as top, bottom, left, right.

Case 3: science-method accordion. Stress-test “The shorthand accepts one to four values” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners.” should remain invariant and what observation would expose reading the values as top, bottom, left, right.

Case 4: revision navigation panel. Explain “The shorthand accepts one to four values” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners.” should remain invariant and what observation would expose reading the values as top, bottom, left, right.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals reading the values as top, bottom, left, right.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Label every corner in a visible fixture.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “The shorthand accepts one to four values”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests corner-shape follows the four-side value expansion pattern for top, right, bottom and left corners.?”, and “Can you make a smaller example of reading the values as top, bottom, left, right?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Test two values. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Write corner mapping before styling asymmetric cards. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “The shorthand accepts one to four values” means the learner can predict the ordinary case, recognise reading the values as top, bottom, left, right, diagnose the earliest mistaken assumption, recover with “Label every corner in a visible fixture.” and defend this decision: Write corner mapping before styling asymmetric cards. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

Properties such as corner-top-left-shape set a single physical corner curve. That is the invariant to preserve when names, data or surrounding project details change.

Longhands and shorthands participate in the cascade together. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is overriding the shorthand later without noticing cascade order. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{border-radius:2rem;corner-top-left-shape:notch}

Read the trace, not just the last line

Trace source order, specificity and affected longhand. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Corner longhands target one physical corner”, separate contract from coincidence. The contract is “Properties such as corner-top-left-shape set a single physical corner curve.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Inspect computed values after each rule.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Corner longhands target one physical corner” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “Properties such as corner-top-left-shape set a single physical corner curve.” should remain invariant and what observation would expose overriding the shorthand later without noticing cascade order.

Case 2: CCA schedule card. Contrast “Corner longhands target one physical corner” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “Properties such as corner-top-left-shape set a single physical corner curve.” should remain invariant and what observation would expose overriding the shorthand later without noticing cascade order.

Case 3: science-method accordion. Stress-test “Corner longhands target one physical corner” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “Properties such as corner-top-left-shape set a single physical corner curve.” should remain invariant and what observation would expose overriding the shorthand later without noticing cascade order.

Case 4: revision navigation panel. Explain “Corner longhands target one physical corner” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “Properties such as corner-top-left-shape set a single physical corner curve.” should remain invariant and what observation would expose overriding the shorthand later without noticing cascade order.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals overriding the shorthand later without noticing cascade order.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Inspect computed values after each rule.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Corner longhands target one physical corner”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests Properties such as corner-top-left-shape set a single physical corner curve.?”, and “Can you make a smaller example of overriding the shorthand later without noticing cascade order?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Swap rule order. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use a predictable shorthand/longhand policy. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Corner longhands target one physical corner” means the learner can predict the ordinary case, recognise overriding the shorthand later without noticing cascade order, diagnose the earliest mistaken assumption, recover with “Inspect computed values after each rule.” and defend this decision: Use a predictable shorthand/longhand policy. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation. That is the invariant to preserve when names, data or surrounding project details change.

Logical axes describe document flow rather than a fixed screen side. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is treating start as permanently left. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.callout{corner-start-start-shape:bevel}

Read the trace, not just the last line

Trace block start and inline start to the physical corner. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Logical longhands follow writing mode”, separate contract from coincidence. The contract is “Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Test left-to-right and right-to-left samples.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Logical longhands follow writing mode” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation.” should remain invariant and what observation would expose treating start as permanently left.

Case 2: CCA schedule card. Contrast “Logical longhands follow writing mode” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation.” should remain invariant and what observation would expose treating start as permanently left.

Case 3: science-method accordion. Stress-test “Logical longhands follow writing mode” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation.” should remain invariant and what observation would expose treating start as permanently left.

Case 4: revision navigation panel. Explain “Logical longhands follow writing mode” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation.” should remain invariant and what observation would expose treating start as permanently left.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals treating start as permanently left.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Test left-to-right and right-to-left samples.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Logical longhands follow writing mode”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests Flow-relative names such as corner-start-start-shape map through writing-mode, direction and text orientation.?”, and “Can you make a smaller example of treating start as permanently left?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Predict RTL mapping. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use logical properties for flow-aware components. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Logical longhands follow writing mode” means the learner can predict the ordinary case, recognise treating start as permanently left, diagnose the earliest mistaken assumption, recover with “Test left-to-right and right-to-left samples.” and defend this decision: Use logical properties for flow-aware components. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

A child does not receive the parent’s corner-shape merely through inheritance. That is the invariant to preserve when names, data or surrounding project details change.

The property applies through selector matching, not inherited value flow. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is setting the property on a wrapper and expecting all cards to change. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.parent{corner-shape:squircle}.child{border-radius:1rem}

Read the trace, not just the last line

Trace cascade separately for each element. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “corner-shape is not inherited”, separate contract from coincidence. The contract is “A child does not receive the parent’s corner-shape merely through inheritance.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Inspect parent and child computed values.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “corner-shape is not inherited” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “A child does not receive the parent’s corner-shape merely through inheritance.” should remain invariant and what observation would expose setting the property on a wrapper and expecting all cards to change.

Case 2: CCA schedule card. Contrast “corner-shape is not inherited” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “A child does not receive the parent’s corner-shape merely through inheritance.” should remain invariant and what observation would expose setting the property on a wrapper and expecting all cards to change.

Case 3: science-method accordion. Stress-test “corner-shape is not inherited” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “A child does not receive the parent’s corner-shape merely through inheritance.” should remain invariant and what observation would expose setting the property on a wrapper and expecting all cards to change.

Case 4: revision navigation panel. Explain “corner-shape is not inherited” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “A child does not receive the parent’s corner-shape merely through inheritance.” should remain invariant and what observation would expose setting the property on a wrapper and expecting all cards to change.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals setting the property on a wrapper and expecting all cards to change.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Inspect parent and child computed values.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “corner-shape is not inherited”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests A child does not receive the parent’s corner-shape merely through inheritance.?”, and “Can you make a smaller example of setting the property on a wrapper and expecting all cards to change?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Write a descendant rule. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Scope with selectors, not inheritance assumptions. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “corner-shape is not inherited” means the learner can predict the ordinary case, recognise setting the property on a wrapper and expecting all cards to change, diagnose the earliest mistaken assumption, recover with “Inspect parent and child computed values.” and defend this decision: Scope with selectors, not inheritance assumptions. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The specification computes corner-shape keywords to their corresponding superellipse values. That is the invariant to preserve when names, data or surrounding project details change.

Computed values normalise the semantic curve. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is asserting exact authored keyword text in every computed-style test. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

const value=getComputedStyle(box).cornerShape;
console.log(value)

Read the trace, not just the last line

Trace authored keyword to computed curve. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Computed values become superellipse forms”, separate contract from coincidence. The contract is “The specification computes corner-shape keywords to their corresponding superellipse values.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Check support and record the browser before inspecting serialization.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Computed values become superellipse forms” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The specification computes corner-shape keywords to their corresponding superellipse values.” should remain invariant and what observation would expose asserting exact authored keyword text in every computed-style test.

Case 2: CCA schedule card. Contrast “Computed values become superellipse forms” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The specification computes corner-shape keywords to their corresponding superellipse values.” should remain invariant and what observation would expose asserting exact authored keyword text in every computed-style test.

Case 3: science-method accordion. Stress-test “Computed values become superellipse forms” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The specification computes corner-shape keywords to their corresponding superellipse values.” should remain invariant and what observation would expose asserting exact authored keyword text in every computed-style test.

Case 4: revision navigation panel. Explain “Computed values become superellipse forms” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The specification computes corner-shape keywords to their corresponding superellipse values.” should remain invariant and what observation would expose asserting exact authored keyword text in every computed-style test.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals asserting exact authored keyword text in every computed-style test.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Check support and record the browser before inspecting serialization.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Computed values become superellipse forms”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The specification computes corner-shape keywords to their corresponding superellipse values.?”, and “Can you make a smaller example of asserting exact authored keyword text in every computed-style test?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare squircle and superellipse(2). Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Test semantics rather than fragile serialization when possible. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Computed values become superellipse forms” means the learner can predict the ordinary case, recognise asserting exact authored keyword text in every computed-style test, diagnose the earliest mistaken assumption, recover with “Check support and record the browser before inspecting serialization.” and defend this decision: Test semantics rather than fragile serialization when possible. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space. That is the invariant to preserve when names, data or surrounding project details change.

Specification and implementation support are separate facts. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming a static draft example proves smooth support everywhere. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.box{transition:corner-shape .4s;corner-shape:round}.box.active{corner-shape:squircle}

Read the trace, not just the last line

Trace start parameter, intermediate parameter and end parameter. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Corner shapes can interpolate”, separate contract from coincidence. The contract is “The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Use a short local animation with a stable radius.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Corner shapes can interpolate” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space.” should remain invariant and what observation would expose assuming a static draft example proves smooth support everywhere.

Case 2: CCA schedule card. Contrast “Corner shapes can interpolate” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space.” should remain invariant and what observation would expose assuming a static draft example proves smooth support everywhere.

Case 3: science-method accordion. Stress-test “Corner shapes can interpolate” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space.” should remain invariant and what observation would expose assuming a static draft example proves smooth support everywhere.

Case 4: revision navigation panel. Explain “Corner shapes can interpolate” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space.” should remain invariant and what observation would expose assuming a static draft example proves smooth support everywhere.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming a static draft example proves smooth support everywhere.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Use a short local animation with a stable radius.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Corner shapes can interpolate”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The animation type follows superellipse interpolation, allowing supported shape values to transition through the parameter space.?”, and “Can you make a smaller example of assuming a static draft example proves smooth support everywhere?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Disable the transition. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Treat motion as optional enhancement. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Corner shapes can interpolate” means the learner can predict the ordinary case, recognise assuming a static draft example proves smooth support everywhere, diagnose the earliest mistaken assumption, recover with “Use a short local animation with a stable radius.” and defend this decision: Treat motion as optional enhancement. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

corner-shape changes the corner curve while the established border-radius overflow model continues to clip content. That is the invariant to preserve when names, data or surrounding project details change.

Clipping and curve selection combine. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is forgetting that a concave shape can remove visible corner area. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.panel{border-radius:2rem;corner-shape:scoop;overflow:hidden}

Read the trace, not just the last line

Trace outer curve and overflow clip edge. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Overflow clipping still follows the shaped corner”, separate contract from coincidence. The contract is “corner-shape changes the corner curve while the established border-radius overflow model continues to clip content.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Test a high-contrast child background.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Overflow clipping still follows the shaped corner” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape changes the corner curve while the established border-radius overflow model continues to clip content.” should remain invariant and what observation would expose forgetting that a concave shape can remove visible corner area.

Case 2: CCA schedule card. Contrast “Overflow clipping still follows the shaped corner” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape changes the corner curve while the established border-radius overflow model continues to clip content.” should remain invariant and what observation would expose forgetting that a concave shape can remove visible corner area.

Case 3: science-method accordion. Stress-test “Overflow clipping still follows the shaped corner” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape changes the corner curve while the established border-radius overflow model continues to clip content.” should remain invariant and what observation would expose forgetting that a concave shape can remove visible corner area.

Case 4: revision navigation panel. Explain “Overflow clipping still follows the shaped corner” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “corner-shape changes the corner curve while the established border-radius overflow model continues to clip content.” should remain invariant and what observation would expose forgetting that a concave shape can remove visible corner area.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals forgetting that a concave shape can remove visible corner area.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Test a high-contrast child background.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Overflow clipping still follows the shaped corner”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests corner-shape changes the corner curve while the established border-radius overflow model continues to clip content.?”, and “Can you make a smaller example of forgetting that a concave shape can remove visible corner area?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare overflow visible and hidden. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Review content near concave corners. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Overflow clipping still follows the shaped corner” means the learner can predict the ordinary case, recognise forgetting that a concave shape can remove visible corner area, diagnose the earliest mistaken assumption, recover with “Test a high-contrast child background.” and defend this decision: Review content near concave corners. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module. That is the invariant to preserve when names, data or surrounding project details change.

Inner borders and shadows can use adjusted geometry. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming every derived edge is the same unscaled mathematical curve. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.card{border:4px solid;box-shadow:0 8px 20px #0003;border-radius:2rem;corner-shape:squircle}

Read the trace, not just the last line

Trace outer edge, inner edge and shadow separately. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Borders and shadows respond to the curve”, separate contract from coincidence. The contract is “The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Use uniform borders first, then test mixed widths.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Borders and shadows respond to the curve” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module.” should remain invariant and what observation would expose assuming every derived edge is the same unscaled mathematical curve.

Case 2: CCA schedule card. Contrast “Borders and shadows respond to the curve” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module.” should remain invariant and what observation would expose assuming every derived edge is the same unscaled mathematical curve.

Case 3: science-method accordion. Stress-test “Borders and shadows respond to the curve” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module.” should remain invariant and what observation would expose assuming every derived edge is the same unscaled mathematical curve.

Case 4: revision navigation panel. Explain “Borders and shadows respond to the curve” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module.” should remain invariant and what observation would expose assuming every derived edge is the same unscaled mathematical curve.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming every derived edge is the same unscaled mathematical curve.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Use uniform borders first, then test mixed widths.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Borders and shadows respond to the curve”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The corner curve affects border rendering, box shadows and overflow clip shaping, with inner-edge details defined by the module.?”, and “Can you make a smaller example of assuming every derived edge is the same unscaled mathematical curve?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Vary one border width. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Inspect the whole decoration stack. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Borders and shadows respond to the curve” means the learner can predict the ordinary case, recognise assuming every derived edge is the same unscaled mathematical curve, diagnose the earliest mistaken assumption, recover with “Use uniform borders first, then test mixed widths.” and defend this decision: Inspect the whole decoration stack. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

A functional rounded-corner baseline should remain when corner-shape is unsupported. That is the invariant to preserve when names, data or surrounding project details change.

Corner style is polish, not access to information. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is hiding content or controls until the decoration is supported. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.card{border-radius:2rem}
@supports (corner-shape:squircle){.card{corner-shape:squircle}}

Read the trace, not just the last line

Trace baseline rendering and enhanced rendering. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Progressive enhancement protects unsupported browsers”, separate contract from coincidence. The contract is “A functional rounded-corner baseline should remain when corner-shape is unsupported.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Disable the feature declaration and use the full component.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Progressive enhancement protects unsupported browsers” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “A functional rounded-corner baseline should remain when corner-shape is unsupported.” should remain invariant and what observation would expose hiding content or controls until the decoration is supported.

Case 2: CCA schedule card. Contrast “Progressive enhancement protects unsupported browsers” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “A functional rounded-corner baseline should remain when corner-shape is unsupported.” should remain invariant and what observation would expose hiding content or controls until the decoration is supported.

Case 3: science-method accordion. Stress-test “Progressive enhancement protects unsupported browsers” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “A functional rounded-corner baseline should remain when corner-shape is unsupported.” should remain invariant and what observation would expose hiding content or controls until the decoration is supported.

Case 4: revision navigation panel. Explain “Progressive enhancement protects unsupported browsers” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “A functional rounded-corner baseline should remain when corner-shape is unsupported.” should remain invariant and what observation would expose hiding content or controls until the decoration is supported.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals hiding content or controls until the decoration is supported.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Disable the feature declaration and use the full component.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Progressive enhancement protects unsupported browsers”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests A functional rounded-corner baseline should remain when corner-shape is unsupported.?”, and “Can you make a smaller example of hiding content or controls until the decoration is supported?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Write an unsupported-browser route. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Make decorative support optional. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Progressive enhancement protects unsupported browsers” means the learner can predict the ordinary case, recognise hiding content or controls until the decoration is supported, diagnose the earliest mistaken assumption, recover with “Disable the feature declaration and use the full component.” and defend this decision: Make decorative support optional. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword. That is the invariant to preserve when names, data or surrounding project details change.

Broad selectors multiply visual and compatibility risk. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is applying a global experimental shape after seeing one demo. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.lesson-card{border-radius:1.5rem;corner-shape:squircle}

Read the trace, not just the last line

Trace selector scope to every rendered consumer. Write the trace as a sequence of labelled states. For CSS corner-shape, inspect computed styles, endpoint value types, used box dimensions, overflow painting and motion-preference state; a single final value can hide the mechanism that produced it.

For “Choose shape, scope and motion by component job”, separate contract from coincidence. The contract is “The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Inventory affected components and record a rollback rule.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework-answer disclosure. Model “Choose shape, scope and motion by component job” with a button-controlled panel with short and long explanations. Before touching a tool, state which part of the case corresponds to the input, why “The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword.” should remain invariant and what observation would expose applying a global experimental shape after seeing one demo.

Case 2: CCA schedule card. Contrast “Choose shape, scope and motion by component job” with a locally scoped expanding region inside a responsive layout. Before touching a tool, state which part of the case corresponds to the input, why “The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword.” should remain invariant and what observation would expose applying a global experimental shape after seeing one demo.

Case 3: science-method accordion. Stress-test “Choose shape, scope and motion by component job” with intrinsic content, padding, borders and late-loading media. Before touching a tool, state which part of the case corresponds to the input, why “The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword.” should remain invariant and what observation would expose applying a global experimental shape after seeing one demo.

Case 4: revision navigation panel. Explain “Choose shape, scope and motion by component job” with keyboard operation, reduced motion and an unsupported-browser fallback. Before touching a tool, state which part of the case corresponds to the input, why “The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword.” should remain invariant and what observation would expose applying a global experimental shape after seeing one demo.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals applying a global experimental shape after seeing one demo.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Inventory affected components and record a rollback rule.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS corner-shape to support “Choose shape, scope and motion by component job”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The useful decision combines curve meaning, radius size, writing mode, support and accessibility rather than selecting a fashionable keyword.?”, and “Can you make a smaller example of applying a global experimental shape after seeing one demo?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Choose for a lesson card, ticket and navigation control. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Deploy the smallest reversible enhancement first. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Choose shape, scope and motion by component job” means the learner can predict the ordinary case, recognise applying a global experimental shape after seeing one demo, diagnose the earliest mistaken assumption, recover with “Inventory affected components and record a rollback rule.” and defend this decision: Deploy the smallest reversible enhancement first. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

For CSS corner-shape, start with evidence rather than a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but reference use is weak, practise finding the governing contract. If routine cases work but boundaries fail, vary one condition. If explanations transfer, move to a small project.

Punggol family routines are often busy, so use one complete CSS corner-shape prediction–observation–explanation cycle while attention is good. Ten to twenty focused minutes can be enough. Keep a four-line record: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning.

Use disposable fixtures, temporary directories and test repositories. Backups remain necessary. The activities in this guide are proposed home-learning exercises, not advertised lesson times, branch facilities, school affiliations or outcome guarantees.

1. Separate radius and shape

Hold radius constant while comparing curves. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

2. Build the keyword family

Render round, squircle, square, bevel, scoop and notch. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

3. Map asymmetric corners

Label the one-to-four shorthand expansion. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

4. Test writing modes

Compare a logical corner in LTR and RTL. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

5. Animate with a no-motion route

Transition round to squircle, then disable motion. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

6. Inspect decoration geometry

Test clipping, border and shadow together. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

7. Write a fallback component

Keep a card fully usable without support. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

8. Choose the curve

Defend three shapes for three interface jobs. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Frequently asked questions

How long should a practice session be?

Use one complete CSS corner-shape prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.

Should every option or method be memorised?

No. For CSS corner-shape, memorise governing distinctions and practise retrieving the primary reference. Understanding means predicting and explaining, not reciting a parameter list.

What if the result is correct but the explanation is weak?

Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.

Is the shortest solution the best?

Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.

When should the official reference be used?

Use it whenever CSS corner-shape syntax, supported values, version behaviour or implementation boundaries matter. The primary source settles the current contract.

How can a parent help without technical expertise?

Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.

How do we test transfer?

Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.

What should be saved after practice?

Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.

Can these exercises replace backups?

No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.

What counts as mastery?

The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.

Primary and supporting references

• Primary technical source for CSS corner-shape
• eduKatePunggol: How Studying Works

Return to contents