1

Instead of square I want it around the image

So I am wanting to change my red circular border into an image. however it keeps coming out as a square or rectangle.

I have managed to find this jsfiddle and amended it to show what is going wrong

.line {
  z-index: 10;
  border: 12px solid #FF0000;
  /*border-image:  url('https://i.pinimg.com/originals/3c/bf/5e/3cbf5eabbde02cad7a36c47d408b5e58.jpg') 360 round;*/
  border-radius: 50%;
}

I am hoping to get the border image to wrap around the inner circular image instead i get either pillars or a square/rectangle.

EDIT: the proposed duplicate primarily focuses on adding a gradient within the border. I am simply wanting to overlay my imge url ontop of the border.

Jac
  • 21
  • 4
  • 1
    I think what you're trying to achieve is not possible. Please refer to https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient . – Telmo Dias Aug 21 '19 at 10:10
  • a gradient is considered as an image so the duplicate is valid – Temani Afif Aug 21 '19 at 18:45

2 Answers2

1
  • added box-sizing property to make sure that the border size and padding/margins wont be a problem
  • the border radius must be half the width and the height plus you must always declare the width and the height.
  • Here is the working CSS from your fiddle after modifying it EDIT: Can you clarify your seconed (gradient) question?

.avatar { 
width: 128px;
height: 128px;
margin: 10px;
border: 10px solid red;
border-radius: 50%;
box-sizing: border-radius;
}
<img class="avatar" src="http://cs409019.vk.me/v409019863/1b6/09FPiv6Nr5A.jpg" />
Omar Zikry
  • 84
  • 3
  • where you have red i want that area to be a linked image. however when you link the image, it reverts back to a rectangle. – Jac Aug 21 '19 at 10:41
1

Please refer this link for detail,
https://jsfiddle.net/jignashagpatel/q2uvapLc/2/

.avatar{
    background-image: url('https://www.w3schools.com/cssref/border.png');
    padding: 15px;
    border-radius: 50%;
    background-repeat:repeat;
}

   <img class="avatar" src="http://cs409019.vk.me/v409019863/1b6/09FPiv6Nr5A.jpg" >
jignasha
  • 168
  • 3