CODEWITHSUNDEEP
htmlcss
Hamza Ahmad
Hamza Ahmad

Reputation: 81

How to have CSS style for specific div?

I want to use border radius for specific images, how I can do that in CSS? When I try to use border radius property it applies it on all the images on that page, and when I use it via class it don't work. Please look at this code and tell me. 

#radiusimage{
  border-radius: 25px;
}
<img class="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

Upvotes: 2

Views: 268

Answers (5)

Rachel Gallen
Rachel Gallen

Reputation: 28573

if you want to apply this to a number of images, then you should use a class, but add it on as another class if neccessary and remember your unique id

so img id = "apple" class = "green borderradius" will look different than img id="apple" class ="green" for example

See fiddle or snippet

.green {
  background-color: green;
}

.yellow {
  background-color: yellow
}

.radius {
  border-radius: 25px;
}

img {
  background-size: 50px 50px;
  background-repeat: no-repeat;
}
<img id ="apple" class="yellow radius" src="http://www.hudsonproduce.com/images/fruitimages/apples-fuji.png">

<img id="apple1" class="green radius" src="http://www.hudsonproduce.com/images/fruitimages/apples-fuji.png">

<img id ="apple2" class="green" src="http://www.hudsonproduce.com/images/fruitimages/apples-fuji.png">

Upvotes: 0

Undecided Dev
Undecided Dev

Reputation: 830

Because your img tag has no id of radiusimage try to use . not # on radiusimage it specifies its a class.

Upvotes: 3

Selvam Elumalai
Selvam Elumalai

Reputation: 693

Looks like you using id(#) in the place of class(.)

Here is solution https://jsfiddle.net/itsselvam/f1j4y8gr/

Upvotes: 1

Thamilhan
Thamilhan

Reputation: 13313

While you use class HTML attribute, you need to use . in CSS

.radiusimage {
    border-radius: 25px;
}
<img class="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

If you want to use # in CSS, then change your HTML attribute to id

#radiusimage {
    border-radius: 25px;
}
<img id="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

Upvotes: 5

Minal Chauhan
Minal Chauhan

Reputation: 6158

Your css define radiusimage as a id and in HTML use as a class..

#radiusimage{
  border-radius: 25px;
}
<img id="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

Or if you want us as class define class in css like this: 

.radiusimage{
  border-radius: 25px;
}
<img class="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

Upvotes: 1

Related Questions