CSSmarkup~15 mins

Border in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Stylish Border Around a Box

📖 Scenario: You want to make a box stand out on a webpage by adding a border around it. Borders help separate content and make it look neat.

🎯 Goal: Build a simple webpage with a box that has a red, solid border that is 4 pixels thick.

📋 What You'll Learn

Create an HTML element with a class box

Add CSS to style the .box with a border

The border must be 4 pixels thick, solid style, and red color

The box should have some padding so the content inside is not touching the border

Use semantic HTML and ensure the page is responsive

💡 Why This Matters

🌍 Real World

Borders are used in websites to highlight sections, separate content, and improve visual design.

💼 Career

Knowing how to style borders is a basic skill for front-end web developers and designers to create visually appealing layouts.

Progress0 / 4 steps

Create the HTML structure with a box

Write the HTML code to create a <div> element with the class box inside the <main> section. Add the text Content inside the box inside this div.

CSS




    
    
    Box with Border

Need a hint?

Use a <div> tag with class="box" inside the <main> tag.

Add a CSS style block and define the border thickness

Inside the <head> section, add a <style> block. Inside it, create a CSS rule for the class .box and set the border width to 4px using the border-width property.

CSS




    
    
    Box with Border
    
        /* Set border width for .box */
    


    
        Content inside the box

Need a hint?

Use border-width: 4px; inside the .box CSS rule.

Add border style and color to the box

In the existing .box CSS rule, add border-style: solid; and border-color: red; to make the border solid and red.

CSS




    
    
    Box with Border
    
        .box {
            border-width: 4px;
            /* Add border style and color here */
        }
    


    
        Content inside the box

Need a hint?

Add border-style: solid; and border-color: red; inside the .box CSS rule.

Add padding inside the box for spacing

In the .box CSS rule, add padding: 1rem; to create space between the border and the text inside the box.

CSS




    
    
    Box with Border
    
        .box {
            border-width: 4px;
            border-style: solid;
            border-color: red;
            /* Add padding here */
        }
    


    
        Content inside the box

Need a hint?

Use padding: 1rem; inside the .box CSS rule to add space inside the box.