How to make CSS border on image?

Question

How to crop an image (600x450) and create a frame on it using CSS?

in

Is it possible? Which is better to use? Create some wrapper element with border radius?

Answer 1

I think this is the best you can do with css:

CSS

img {
    width:400px;
    height:400px;
    border-top-left-radius:50% 50px;
    border-top-right-radius:50% 50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

http://jsfiddle.net/andyfurniss/rmc4nuu7/

Then just add a white frame and box-shadow.

Answer 2

<style>
    #img{
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 10%;
        border-top-right-radius: 10%;
        width: 600px;
        height: 450px;
    }
</style>

Answer 3

@Phylogenesis , , .

hieght, :

#mask img {
    margin-left: 50%;
    transform:translate(-50%, 0);
    border-bottom-left-radius:100%;
    border-bottom-right-radius:100%;
}