CSSmarkup~30 mins

Border styles in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Border styles

📖 Scenario: You are creating a simple webpage with a box that needs different border styles to show how borders can look.

🎯 Goal: Build a webpage with a <div> box that uses different CSS border styles: solid, dashed, dotted, and double.

📋 What You'll Learn

Create a <div> with class box in HTML

Add a CSS variable called borderWidth with value 0.2rem

Use the CSS variable borderWidth to set the border width

Apply four different border styles: solid, dashed, dotted, and double

Make sure the box is visible with a fixed width and height

Use semantic HTML5 structure

💡 Why This Matters

🌍 Real World

Borders are used in web design to separate content, highlight sections, and improve visual appeal. Knowing how to style borders helps create clear and attractive layouts.

💼 Career

Front-end developers often style borders to match design requirements. Understanding border styles and CSS variables is essential for building maintainable and scalable websites.

Progress0 / 4 steps

Create the HTML structure with a box

Create a <main> element containing a <div> with class box. This will be the box to style.

CSS

Need a hint?

Use semantic <main> and add a <div> with class box.

Add a CSS variable for border width

Add a CSS variable called --borderWidth with the value 0.2rem inside the :root selector.

CSS


  



:root {
  /* Your code here */
}

Need a hint?

Use :root to define the CSS variable --borderWidth with value 0.2rem.

Apply different border styles using the CSS variable

Add CSS for the .box class to set width and height to 10rem. Then add four borders: top border with style solid, right border with style dashed, bottom border with style dotted, and left border with style double. Use the CSS variable --borderWidth for all border widths and set the border color to black.

CSS


  



:root {
  --borderWidth: 0.2rem;
}

.box {
  /* Your code here */
}

Need a hint?

Set fixed width and height for the box. Use the CSS variable --borderWidth for all borders. Apply the four border styles on each side.

Complete the HTML with language and meta tags

Add the full HTML5 document structure with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Place the existing <style> and <main> inside the <body>.

CSS




  


  
    
  

  
  :root {
    --borderWidth: 0.2rem;
  }

  .box {
    width: 10rem;
    height: 10rem;
    border-top: var(--borderWidth) solid black;
    border-right: var(--borderWidth) dashed black;
    border-bottom: var(--borderWidth) dotted black;
    border-left: var(--borderWidth) double black;
  }

Need a hint?

Wrap your existing code in a full HTML5 document with language and meta tags for charset and viewport.