Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a browser window example with CSS?

CSS Web Development Front End Technology

Creating a browser window mockup with CSS is a great way to showcase web content in a realistic browser interface. This involves styling elements to resemble the typical browser components like window controls, address bar, and content area.

Syntax

/* Browser window structure */
.browser-window {
    border: solid color;
    border-radius: radius;
}

.browser-header {
    background: color;
    padding: value;
}

.browser-controls {
    display: inline-block;
    border-radius: 50%;
}

Example

The following example creates a complete browser window mockup with traffic light controls, address bar, and content area −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f0f0f0;
        margin: 20px;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .browser-window {
        border: 3px solid #d1d1d1;
        border-radius: 8px;
        overflow: hidden;
        background: white;
        max-width: 800px;
        margin: 0 auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .browser-header {
        padding: 12px;
        background: #f5f5f5;
        border-bottom: 1px solid #d1d1d1;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    .browser-controls {
        display: flex;
        gap: 8px;
    }
    
    .control-dot {
        height: 12px;
        width: 12px;
        border-radius: 50%;
        display: inline-block;
    }
    
    .close { background-color: #ff5f56; }
    .minimize { background-color: #ffbd2e; }
    .maximize { background-color: #27ca3f; }
    
    .address-bar {
        flex: 1;
        border: 1px solid #d1d1d1;
        border-radius: 4px;
        padding: 8px 12px;
        background: white;
        color: #666;
        font-size: 14px;
    }
    
    .menu-button {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        padding: 4px;
    }
    
    .menu-dot {
        width: 4px;
        height: 4px;
        background-color: #666;
        border-radius: 50%;
    }
    
    .browser-content {
        padding: 30px;
        min-height: 300px;
        background: white;
    }
    
    .browser-content h1 {
        color: #333;
        margin-top: 0;
    }
    
    .browser-content h2 {
        color: #666;
        font-weight: 400;
    }
</style>
</head>
<body>
    <div class="browser-window">
        <div class="browser-header">
            <div class="browser-controls">
                <span class="control-dot close"></span>
                <span class="control-dot minimize"></span>
                <span class="control-dot maximize"></span>
            </div>
            <input type="text" class="address-bar" value="https://www.tutorialspoint.com" readonly>
            <div class="menu-button">
                <span class="menu-dot"></span>
                <span class="menu-dot"></span>
                <span class="menu-dot"></span>
            </div>
        </div>
        <div class="browser-content">
            <h1>Welcome to TutorialsPoint</h1>
            <h2>Learn programming with our comprehensive tutorials</h2>
            <p>This is a sample browser window created entirely with CSS. The design includes realistic browser controls, an address bar, and a content area.</p>
        </div>
    </div>
</body>
</html>

The output of the above code is −

A realistic browser window mockup appears with red, yellow, and green traffic light controls on the left, a centered address bar showing "https://www.tutorialspoint.com", a menu button on the right, and content below featuring a welcome message and description text.

Key Features

  • Traffic Light Controls: Red (close), yellow (minimize), and green (maximize) circular buttons
  • Address Bar: Styled input field showing a URL
  • Menu Button: Three-dot vertical menu indicator
  • Flexbox Layout: Modern CSS for proper alignment and spacing
  • Box Shadow: Adds depth and realism to the window

Conclusion

Creating a browser window with CSS involves combining border-radius for rounded corners, flexbox for layout, and careful color choices for realistic browser controls. This technique is perfect for showcasing web designs or creating mockups.

Updated on: 2026-03-15T15:01:20+05:30

337 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements