How to override tags - bootstrap css scaffolding.less

I can't override HTML tags using my own styles. For example if I add new css rule for hr tag then I see both rules. I want to use my custom rule.

html

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <style type="text/css">

                p {
                    font-size: 12px;
                    width: 150px;
                    display: inline-block;
                    margin-left: 18px;
                }
                .testbox {
                    margin: 20px auto;
                    width: 343px;
                    height: 244px;
                    -webkit-border-radius: 8px/7px;
                    -moz-border-radius: 8px/7px;
                    border-radius: 8px/7px;
                    background-color: #ebebeb;
                    -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
                    -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
                    box-shadow: 1px 2px 5px rgba(0,0,0,.31);
                    border: solid 1px #cbc9c9;
                }

               .box1 {
                    color: #a9a9a9;
                    opacity: 0.3;
                }
              </style>

<div class="testbox">
    <h1>Registration</h1>
    <form action="/">
        <hr class="box1">
        <label id="icon" for="name"><i class="icon-envelope "></i></label>
        <input type="text" name="name" id="name" placeholder="Email" required/>
        <label id="icon" for="name"><i class="icon-user"></i></label>
        <input type="text" name="name" id="name" placeholder="Kod" required/>
        <p>By clicking Register, you agree on our <a href="#">terms and condition</a>.</p>
        <a href="#" class="button">Register</a>
    </form>
</div>

It's possible to do that?