How to add a border to a checkbox using css?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, learn how to add a border to a checkbox using css?.

Checkbox is an HTML element which is used to take input from the user.

Table of contents

  • Includes css in html page
  • Include the code in body

This article will guide you to adding a border to a checkbox in CSS with example.

Step 1: Includes css in html page

Here we are using css for basic styling in the checkbox and adding a border.

      
        .border input[type=checkbox] {
            outline: 2px solid #c00;
            margin-left: 5%;
        }
     

Step 2: Include the code in body

Include the code below in <body> to create an input checkbox.

    <div class="border">
        <input type='checkbox'><label>Press your mouse</label><br />
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">

<head>

    <title>CSS</title>
    <style>

        .border input[type=checkbox] {
            outline: 2px solid #c00;
            margin-left: 5%;
        }
    </style>
</head>

<body>

    <h3> Add a border to a checkbox</h3>
    <div class="border">
        <input type='checkbox'><label>Press your mouse</label><br/>
    </div>
 
</body>

</html>

Check the output of the above code example.

CSS, Border, Checkbox

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts