CSS - Add border to all divs

I was wondering if there was any "easy" way to add through css lets say:

border: 1px solid red;

to all divs no matter what their id´s are.

开发者_Python百科

I realize this might be a very very basic question (or no possible at all) and I hope it is clear enough.

Just to clarify, lets say I´ve got:

HTML

<div id="one">

</div>

<div id="two">

</div>

and CSS

#one{
height: 10px;
width: 10px;
}

#two{
height: 10px;
width: 10px;
}

The result I actually want is:

#one{

height: 10px;
width: 10px;
border: 1px solid red;
}

#two{
height: 10px;
width: 10px;
border: 1px solid red;
}

I want to achieve this without having to go one by one.

Thanks in advance!!

Please ask for any clarification needed!

---

div {
    border: 1px solid #000000;
}

---

I agree with @McAden's answer. Alternatively, you can use jquery to add the style on the fly:

<script type="text/javascript">
    $('div').css('border','1px solid #000');
</script>

---

As McAden was saying, you may want to specify which divs you want to style. Instead of adding a class to each div you may want to try an approach like this,

.theseDivs div{
    /*styles here*/
}

<div class="theseDivs">
    <div>Style applied here</div>
    <div>and here, </div>
</div>
<div>but not here</div>

---

For all elements

<style> * {
    border: 1px solid #000000;
}
</style>

---

Perhaps this will help you:

div#one, div#two{
    border:1px solid red;
}

---

CSS Using
#one{
height: 100px;
width: 100px;
border:1px solid #000;
}
// you can use sepertely
#two{
height: 100px;
width: 100px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

JQuery Using

<script type="text/javascript">
    $('#one').css('border','1px solid #000');
</script>

---

$('div').css("border", "1px solid #CCC");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div>
1
  <div>
    3
    </div>
<div>
2
</div>
</div>

---

Plain JavaScript:

const style = document.createElement('style');
style.innerHTML= "div {border: 1px solid #FF0000 !important};";
document.head.appendChild(style);