CODEWITHSUNDEEP
htmlcss
B3RDigital
B3RDigital

Reputation: 71

Specificity and CSS border-radius question

very noob question but i was hoping for some help with adjusting some code i have. The image/photo on the screen has curved upper corners and straight bottom corners. I need to create a class with the correct specificity to make sure all corner are curved. Specifically 8px, 8px, 8px, 8px.

<img:src="~/media/xxxxx.ashx" alt="xxxx"/>

Would i create a class in-line above so; <img:src="~/media/xxxxx.ashx" alt="xxxx"/ **class=img**>

Then add a CSS selector 

.img{ border-radius: 8px, 8px, 8px, 8px ]

This may be a really confusing question but hope it makes sense. Sorry if I'm being an idiot.

Upvotes: 0

Views: 150

Answers (7)

Shailesh
Shailesh

Reputation: 337

If you want border-radius in all the corner then use border-radius:8px; and if you want specific side then you will need to use border-radius: top right bottom left; if you want to make box and image inside the box both image and div will be curvey corner then you will need to use below HTML and CSS.

<div classs="box"><img src="xyz" alt="" /></div>

Here it's css :

 .box{border-radius:8px;}
 .box img{ border-radius:8px;}

Upvotes: 0

Akankha Ahmed
Akankha Ahmed

Reputation: 121

It's ok to have silly question. When you ask question you will learn something new.

Here is the answer of your question. I am trying to make it simple.

HTML:

<img src="your image url ">

CSS:

.img{
border-radius: 8px; // for all corner

}

Hope it will solve your issue.

Upvotes: 0

Md Ashikul Islam
Md Ashikul Islam

Reputation: 111

You Can Write CSS border-radius property in four ways

img{
    border-radius: 8px 8x 8x 8x; 
}

Or

img{
    border-radius: 8px;
}

Or

img{
    border-radius: 8px 8px 8px;
}

And Finally

img{
    border-radius: 8px 8px;
}

Upvotes: 0

Evgenii Klepilin
Evgenii Klepilin

Reputation: 695

W3Schools has a really good explanation and guide on corners. Make sure to use their Try it Out! feature to see the instant changes make yourself familiar with it.

If you are interested in it, there are also 4 separate properties that could be used instead. You could set two of them separately without needing to use shorthand. From W3Schools:

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Upvotes: 1

RamBhomkar
RamBhomkar

Reputation: 91

First of all don't say sorry. It is ok to have query or question. Best thing is that you are open to asking question. everyone is facing issues.

Now coming to your question you can use below CSS for top corner in curve shape and bottom will be straight.

img.img{border-radius:8px 8px 0 0}

Let me clear you on how border-radius works. {8px(top-left) 8px(top-right) 0(bottom-right) 0(bottom-left)}

It is work little different than all other CSS property

For specificity, I have added img as element. i.e img.img You can add any other parent class if you have. i.e.parentClass img.img{8px 8px 0 0}

Upvotes: 0

Atif
Atif

Reputation: 64

Related list of properties.

Solution 1:

.img{
    border-top-left-radius: 50px 20px; // for top and left
    border-top-right-radius: 50px 20px; // for top and right
    border-bottom-left-radius: 8px; // for both
    border-bottom-right-radius: 8px; // for both
}

Solution 2:

.img{
    border-radius: 8px 8px 8px 8px; // for all in seperate 
}

Solution 3:

.img{
    border-radius: 8px; // for all at once
}

Upvotes: 0

Ranjith v
Ranjith v

Reputation: 1062

your code is wrong..try like this. inside selector (, don't use)

css

.img{ border-radius: 8px 8px 8px 8px }

Upvotes: 0

Related Questions