CODEWITHSUNDEEP
backgroundcss
Thanh Nguyen
Thanh Nguyen

Reputation: 5342

css border-radius and background color

Here is my code:

HTML:

<div class="main">
  <img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>

CSS:

.main{
    height:240px;
    width: 240px;
    background: #F00;
    border: 1px solid #CCC;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}
.in {
    width: 240px;
    height: 240px;
}

Live example: Jsfiddle

As you see in the example, there is a little background color (red) around at the corners of the image.

How to remove these but keeping border-radius attribute?

Upvotes: 1

Views: 168

Answers (4)

user3463806
user3463806

Reputation:

just remove the code below from the main class

background: #F00; border: 1px solid #CCC;

i think this will help you .

Upvotes: 0

Ajay
Ajay

Reputation: 2080

just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output

like

.main{
    height:240px;
width: 240px;   
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
    //you can use border: 0px;

}

Upvotes: 0

PraJen
PraJen

Reputation: 606

http://jsfiddle.net/3Nzp3/3/

see this fiddle

Remove both line

    background: #F00;
    border: 0px solid #CCC;

Upvotes: 1

Jenz
Jenz

Reputation: 8369

Just remove the styles

background: #F00; 
border: 1px solid #CCC;

from the class main.

Upvotes: 1

Related Questions