Article Categories

Selected Reading

Create a Bordered Button Group with CSS

CSS Web Development Front End Technology

The CSS border property allows you to create visually appealing button groups with defined borders around each button. This technique is useful for creating navigation menus, toolbars, or any grouped interactive elements.

Syntax

.button-group {
    /* Container styles */
}

.button-group button {
    border: width style color;
    /* Additional button styles */
}

Example: Basic Bordered Button Group

The following example creates a horizontal button group with blue borders −

<!DOCTYPE html>
<html>
<head>
<style>
    .btn-group {
        display: flex;
        background-color: orange;
        padding: 10px;
        border-radius: 5px;
    }
    
    .btn {
        color: black;
        background-color: yellow;
        width: 120px;
        text-align: center;
        font-size: 15px;
        padding: 15px 20px;
        border: 3px solid blue;
        cursor: pointer;
        margin-right: 5px;
    }
    
    .btn:last-child {
        margin-right: 0;
    }
    
    .btn:hover {
        background-color: #fff700;
    }
</style>
</head>
<body>
    <h2>Bordered Button Group</h2>
    <p>Hover over the buttons to see the effect:</p>
    
    <div class="btn-group">
        <button class="btn">Home</button>
        <button class="btn">About</button>
        <button class="btn">Services</button>
        <button class="btn">Contact</button>
    </div>
</body>
</html>

Four yellow buttons with blue borders appear horizontally in an orange container. Each button has "Home", "About", "Services", and "Contact" text. The buttons change to a brighter yellow when hovered.

Example: Seamless Connected Buttons

You can create connected buttons by removing borders between adjacent elements −

<!DOCTYPE html>
<html>
<head>
<style>
    .connected-group {
        display: inline-flex;
        border: 2px solid #333;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .connected-btn {
        background-color: #f0f0f0;
        color: #333;
        border: none;
        border-right: 2px solid #333;
        padding: 12px 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .connected-btn:last-child {
        border-right: none;
    }
    
    .connected-btn:hover {
        background-color: #e0e0e0;
    }
</style>
</head>
<body>
    <h2>Connected Button Group</h2>
    <p>Buttons with shared borders:</p>
    
    <div class="connected-group">
        <button class="connected-btn">Edit</button>
        <button class="connected-btn">Delete</button>
        <button class="connected-btn">Share</button>
    </div>
</body>
</html>

Three connected buttons ("Edit", "Delete", "Share") appear as a single unit with rounded corners and shared borders. The buttons have a subtle hover effect.

Key Properties

Property	Description
`border`	Sets the border width, style, and color
`border-right`	Controls the right border (useful for connected buttons)
`display: flex`	Creates a flexible container for button alignment
`overflow: hidden`	Clips content to maintain rounded corners

Conclusion

Creating bordered button groups with CSS is straightforward using the border property combined with flexbox layout. You can customize colors, spacing, and connection styles to match your design requirements.

Chandu yadav

Updated on: 2026-03-15T12:56:31+05:30

486 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next