How do I make a border for <div>'s and <img>'s?

user_13421394 0
Viewed 65

I want to add borders for images and my top-nav and here is my code I have tried

.navtop {
  background: #b7f582;
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.navtop a {
  width: auto;
  min-width: 90px;
  text-align: center;
  text-decoration: none;
  height: 100px;
  -webkit-transition: 0.5s;
  background: #82a8f5;
  float: left;
}
.navtop a:hover {
  transition: 0.5s;
  transform: translateY(10px);
  background: #d96cbc;
  color: black;
}
.navtop img {
  float: left;
  width:  100px;
  height: 100px;
  border-color: black;
  border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png"> 
<a href="homeRG.html"> Home </a>
</div>

How can I add a border color to a <div> area and and image? See, I can add a border onto buttons but not anything else.

css html
3 Answers

Use the border in one statement for simplicity because you are missing the border-style:

border: 5px solid black;

You can check for other border-styles and other options via this link.

user_104702830

You haven't specified the border-style, that's why it's not working. Either add border-style: solid or use the shorthand to define all 3 properties (border-width, border-style and border-color) in a single line: border: 5px solid black.

The reason why defining only border-width and border-color is working on <button>s is that browsers apply some default styles, so buttons already have a border-style defined, as shown below:

console.log(window.getComputedStyle(document.getElementById('defaultButton')).borderStyle);
.navtop {
  background: #b7f582;
  height: 100px;
  overflow: hidden;
  border: 5px solid green;
}

.navtop a {
  width: auto;
  min-width: 90px;
  text-align: center;
  text-decoration: none;
  height: 100px;
  -webkit-transition: 0.5s;
  background: #82a8f5;
  float: left;
}

.navtop a:hover {
  transition: 0.5s;
  transform: translateY(10px);
  background: #d96cbc;
  color: black;
}

.navtop img {
  float: left;
  width:  100px;
  height: 100px;
  border: 5px solid black;
  box-sizing: border-box;
}

#styledButton {
  border-color: red;
  border-width: 5px;
}
<div class="navtop">
  <img src="RingLogo.png"> 
  <a href="homeRG.html">Home</a>
  <button id="defaultButton">Foo</button>
  <button id="styledButton">Bar</button>
</div>

user_37239930

you can do something like this also close the </div>, div is not self closing element.

    .navtop {
        background: #b7f582;
        width: 100%;
        height: 110px;
        overflow: hidden;
        border:5px solid red;
        
    }
    .navtop a {
        width: auto;
        min-width: 90px;
        text-align: center;
        text-decoration: none;
        height: 100px;
        -webkit-transition: 0.5s;
        background: #82a8f5;
        float: left;
    }
    .navtop a:hover {
        transition: 0.5s;
        transform: translateY(10px);
        background: #d96cbc;
        color: black;
    }
    .navtop img {
        float: left;
        width:  100px;
        height: 100px;      
        border: 5px solid blue;
    }
<style>

</style>
<div class="navtop">
<img src="http://placekitten.com/301/301"> 
<a href="homeRG.html"> Home </a>
</div>

user_35643590
Related