Border-radius disappears with overflow rule

Question

I have an issue with using the overflow:visible; rule on the Ionic Framework avatar ion-item. I would like to create a chat bubble with the user image next to it. I have succeeded in getting the image to overflow out of its parent but the result is the border-radius I have set on the ion-item disappears.Without the border radius the border appearscorrectly.

Here's what I'm getting.

And what I'm hoping to achieve.

Here's my CSS

.item-content,.item, p  {
     overflow: visible;

}

.item-avatar {
    margin-left:15%;
    max-width: 50%;
    border-radius: 10px;
    margin-top:10px; 

}

 .item-avatar .item-content > img:first-child,   .item-avatar-left {
    left:-50px;
     overflow: hidden;

}

Here is my view template..

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img class = "avatar" ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
         <p>{{chat.id}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Answer 1

If the child element has a background color and is set to the full width and height of the parent element, then the corners will be cut off.

Most likely, your child element doesn't need a background color, so removing it will solve your problem. On the off chance that it does need a background color, then just inherit the border radius from the parent element.

.item-avatar-child {
  border-radius: inherit;
}