• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

115
Views
I want to add a border to the same styled element with a seperate css class

I want to be able to add a border with javascript. So I thought I could do it with adding it as a seperate class . But it does not work .

#button1 {
    box-shadow:inset 0px 0px 0px 0px #3dc21b;
    background-color:#44c767;
    border-radius: 50%;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:180px 180px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    margin:200px;

    border: 30px solid black ;


}

.AddedbuttonBorder {
    border: 30px solid black ;


}

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You are using an ID and a class as CSS selectors. The ID selector has a higher CSS specifity than the class selector, so the border setting in the ID selector will have priority over the one in the class selector, regardless of their order.

To "overrule" the setting of the ID selector, you can either add !important to the setting in the rule that uses the class selector (border: 30px solid black !important;), or use a selector that combines ID and class, like this:

#button1.AddedbuttonBorder {
    border: 30px solid black;
}
about 3 years ago · Juan Pablo Isaza Report

0

if you want to do this with javascript you can use

document.getElementById('button1').classList.add('AddedbuttonBorder');
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error