CSS • Chapter 23 • Foundations to Production
Borders and Outlines
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
23.1 border
border is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For border in Chapter 23, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for border, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 23, topic 1.
Concept in plain language
border is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal language selector for border. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 23, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the course card example for border. Predict the visual difference before reloading the page. Chapter 23, topic 1, example 2.
Example 3: Narrow-screen test
Test border in the navigation bar at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 23, topic 1, example 3.
Example 4: Translated-text test
Translate the article into a language with longer labels while using border. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 23, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the profile panel to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 23, topic 1, example 5.
Example 6: Accessibility test
Check border in the search form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 23, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the dashboard and determine why the declaration for border wins or loses using the browser's Styles and Computed panels. Chapter 23, topic 1, example 7.
Example 8: Content-stress test
Fill the photo gallery with very long words, URLs, translated text, images, and nested controls. Adjust border without hiding meaningful content. Chapter 23, topic 1, example 8.
Example 9: Refactoring test
Rewrite the pricing table so border uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 23, topic 1, example 9.
Example 10: Production review
Review border in the lesson sidebar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 23, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><div>A</div><div class="featured">Featured</div></div>
<style>
.featured { order:-1; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate border.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- order changes visual order, so it must not replace meaningful source order.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates border without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 23, topic 1.
Practice exercise
Build a fresh example for border from Chapter 23. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
23.2 border-radius
border-radius is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For border-radius in Chapter 23, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for border-radius, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 23, topic 2.
Concept in plain language
border-radius is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal article for border-radius. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 23, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the profile panel example for border-radius. Predict the visual difference before reloading the page. Chapter 23, topic 2, example 2.
Example 3: Narrow-screen test
Test border-radius in the search form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 23, topic 2, example 3.
Example 4: Translated-text test
Translate the dashboard into a language with longer labels while using border-radius. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 23, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the photo gallery to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 23, topic 2, example 5.
Example 6: Accessibility test
Check border-radius in the pricing table with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 23, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the lesson sidebar and determine why the declaration for border-radius wins or loses using the browser's Styles and Computed panels. Chapter 23, topic 2, example 7.
Example 8: Content-stress test
Fill the contact form with very long words, URLs, translated text, images, and nested controls. Adjust border-radius without hiding meaningful content. Chapter 23, topic 2, example 8.
Example 9: Refactoring test
Rewrite the button group so border-radius uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 23, topic 2, example 9.
Example 10: Production review
Review border-radius in the data table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 23, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<article class="card">Rounded card</article>
<style>
.card { border: 1px solid #cbd5e1; border-radius: 1rem; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate border-radius.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- border-radius rounds the corners of the border box.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates border-radius without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 23, topic 2.
Practice exercise
Build a fresh example for border-radius from Chapter 23. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
23.3 outline
outline is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For outline in Chapter 23, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for outline, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 23, topic 3.
Concept in plain language
outline is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal dashboard for outline. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 23, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the photo gallery example for outline. Predict the visual difference before reloading the page. Chapter 23, topic 3, example 2.
Example 3: Narrow-screen test
Test outline in the pricing table at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 23, topic 3, example 3.
Example 4: Translated-text test
Translate the lesson sidebar into a language with longer labels while using outline. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 23, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the contact form to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 23, topic 3, example 5.
Example 6: Accessibility test
Check outline in the button group with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 23, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the data table and determine why the declaration for outline wins or loses using the browser's Styles and Computed panels. Chapter 23, topic 3, example 7.
Example 8: Content-stress test
Fill the media player with very long words, URLs, translated text, images, and nested controls. Adjust outline without hiding meaningful content. Chapter 23, topic 3, example 8.
Example 9: Refactoring test
Rewrite the notification so outline uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 23, topic 3, example 9.
Example 10: Production review
Review outline in the language selector for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 23, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="demo outline">CSS topic: outline</div>
<style>
.outline {
padding: 1rem;
border: 1px solid #94a3b8;
}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate outline.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The selector targets the demonstration for outline, and the declaration changes a visible part of its presentation.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates outline without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 23, topic 3.
Practice exercise
Build a fresh example for outline from Chapter 23. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
23.4 outline-offset
outline-offset is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For outline-offset in Chapter 23, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for outline-offset, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 23, topic 4.
Concept in plain language
outline-offset is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal lesson sidebar for outline-offset. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 23, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the contact form example for outline-offset. Predict the visual difference before reloading the page. Chapter 23, topic 4, example 2.
Example 3: Narrow-screen test
Test outline-offset in the button group at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 23, topic 4, example 3.
Example 4: Translated-text test
Translate the data table into a language with longer labels while using outline-offset. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 23, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the media player to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 23, topic 4, example 5.
Example 6: Accessibility test
Check outline-offset in the notification with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 23, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the language selector and determine why the declaration for outline-offset wins or loses using the browser's Styles and Computed panels. Chapter 23, topic 4, example 7.
Example 8: Content-stress test
Fill the course card with very long words, URLs, translated text, images, and nested controls. Adjust outline-offset without hiding meaningful content. Chapter 23, topic 4, example 8.
Example 9: Refactoring test
Rewrite the navigation bar so outline-offset uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 23, topic 4, example 9.
Example 10: Production review
Review outline-offset in the article for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 23, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<button class="button">Focus me</button>
<style>
.button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 4px; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate outline-offset.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- outline-offset moves the outline away from the border edge.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates outline-offset without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 23, topic 4.
Practice exercise
Build a fresh example for outline-offset from Chapter 23. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
23.5 Logical Borders
Logical Borders is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Logical Borders in Chapter 23, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Logical Borders, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 23, topic 5.
Concept in plain language
Logical Borders is part of the CSS system covered in Chapter 23. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal data table for Logical Borders. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 23, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the media player example for Logical Borders. Predict the visual difference before reloading the page. Chapter 23, topic 5, example 2.
Example 3: Narrow-screen test
Test Logical Borders in the notification at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 23, topic 5, example 3.
Example 4: Translated-text test
Translate the language selector into a language with longer labels while using Logical Borders. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 23, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the course card to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 23, topic 5, example 5.
Example 6: Accessibility test
Check Logical Borders in the navigation bar with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 23, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the article and determine why the declaration for Logical Borders wins or loses using the browser's Styles and Computed panels. Chapter 23, topic 5, example 7.
Example 8: Content-stress test
Fill the profile panel with very long words, URLs, translated text, images, and nested controls. Adjust Logical Borders without hiding meaningful content. Chapter 23, topic 5, example 8.
Example 9: Refactoring test
Rewrite the search form so Logical Borders uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 23, topic 5, example 9.
Example 10: Production review
Review Logical Borders in the dashboard for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 23, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><div>A</div><div class="featured">Featured</div></div>
<style>
.featured { order:-1; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Logical Borders.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- order changes visual order, so it must not replace meaningful source order.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Logical Borders without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 23, topic 5.
Practice exercise
Build a fresh example for Logical Borders from Chapter 23. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 23 review — 10 questions and answers
1. What should you inspect first when border does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for border. Then reduce the example until the winning declaration is clear.
2. How should border be checked before publishing?
Answer: Test border on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when border-radius does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for border-radius. Then reduce the example until the winning declaration is clear.
4. How should border-radius be checked before publishing?
Answer: Test border-radius on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when outline does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for outline. Then reduce the example until the winning declaration is clear.
6. How should outline be checked before publishing?
Answer: Test outline on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when outline-offset does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for outline-offset. Then reduce the example until the winning declaration is clear.
8. How should outline-offset be checked before publishing?
Answer: Test outline-offset on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when Logical Borders does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Logical Borders. Then reduce the example until the winning declaration is clear.
10. How should Logical Borders be checked before publishing?
Answer: Test Logical Borders on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.