Article Categories

Selected Reading

Creating Browsers Window using HTML and CSS

HTML CSS Front End Technology Web Development

A browser window is the graphical user interface (GUI) element of a web browser that displays web pages and web applications. It usually consists of a title bar, menu bar, address bar, navigation buttons, and content area.

Syntax

.container {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.buttons {
    display: flex;
}

.minimize, .maximize, .close {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

Example

The following example creates a complete browser window interface with window controls, navigation bar, and search functionality

<!DOCTYPE html>
<html>
<head>
   <title>Browser Window Demo</title>
   <style>
      .container {
         width: 80%;
         margin: 20px auto;
         border: 1px solid #ccc;
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }

      .title-bar {
         background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
         padding: 8px 12px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #ccc;
      }

      .window-controls {
         display: flex;
         gap: 8px;
      }

      .minimize, .maximize, .close {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         border: none;
         cursor: pointer;
      }

      .minimize {
         background-color: #ffbd2e;
      }

      .maximize {
         background-color: #28ca42;
      }

      .close {
         background-color: #ff5f57;
      }

      .window-title {
         font-size: 14px;
         color: #333;
         font-weight: 500;
      }

      .toolbar {
         background-color: #f8f9fa;
         padding: 10px 15px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #e9ecef;
      }

      .nav-links {
         display: flex;
         gap: 20px;
      }

      .nav-links a {
         color: #333;
         text-decoration: none;
         font-size: 13px;
         padding: 5px 10px;
         border-radius: 4px;
         transition: background-color 0.2s;
      }

      .nav-links a:hover {
         background-color: #e9ecef;
      }

      .address-bar {
         display: flex;
         align-items: center;
         background: white;
         border: 1px solid #ddd;
         border-radius: 20px;
         padding: 8px 15px;
         width: 400px;
         margin: 0 20px;
      }

      .address-bar input {
         border: none;
         outline: none;
         flex: 1;
         font-size: 14px;
         color: #333;
      }

      .search-btn {
         background: #4285f4;
         color: white;
         border: none;
         padding: 6px 12px;
         border-radius: 4px;
         cursor: pointer;
         font-size: 12px;
      }

      .content-area {
         padding: 30px;
         min-height: 300px;
         background: white;
      }

      .content-area h1 {
         color: #333;
         font-size: 28px;
         margin-bottom: 15px;
      }

      .content-area p {
         color: #666;
         line-height: 1.6;
         font-size: 16px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="title-bar">
         <div class="window-controls">
            <button class="close"></button>
            <button class="minimize"></button>
            <button class="maximize"></button>
         </div>
         <div class="window-title">Tutorialspoint - Learn Programming</div>
         <div></div>
      </div>
      
      <div class="toolbar">
         <div class="nav-links">
            <a href="#">Gmail</a>
            <a href="#">Images</a>
            <a href="#">Apps</a>
            <a href="#">Account</a>
         </div>
         
         <div class="address-bar">
            <input type="text" placeholder="https://www.tutorialspoint.com/" readonly>
            <button class="search-btn">Go</button>
         </div>
         
         <div></div>
      </div>
      
      <div class="content-area">
         <h1>Welcome to Tutorialspoint</h1>
         <p>Tutorialspoint is a free online learning platform where you can learn various programming and technology-related subjects. We aim to provide high-quality education to everyone, everywhere.</p>
      </div>
   </div>
</body>
</html>

A browser window interface appears with colored window control buttons (red close, yellow minimize, green maximize), a navigation toolbar with links, an address bar showing "https://www.tutorialspoint.com/", and a content area with the welcome heading and description text.

Key Components

Component	Description
Title Bar	Contains window controls and page title
Window Controls	Close, minimize, and maximize buttons
Toolbar	Navigation links and address bar
Address Bar	Displays the current URL
Content Area	Main display area for web content

Conclusion

Creating a browser window with CSS involves structuring the layout with containers, styling window controls, and designing a functional toolbar. This approach provides a realistic browser interface that can be customized for various web applications.

Jaisshree

Updated on: 2026-03-15T17:35:51+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next