yaboiduke yaboiduke - 11 months ago 48
CSS Question

Border-radius disappears with overflow rule

I have an issue with using the

rule on the Ionic Framework avatar
. 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
disappears.Without the border radius the border appearscorrectly.

Here's what I'm getting.
Here's what I'm getting

And what I'm hoping to achieve.

The expected result

Here's my CSS

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


.item-avatar {
max-width: 50%;
border-radius: 10px;


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


Here is my view template..

<ion-view view-title="Chats">
<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}}">
<i class="icon ion-chevron-right icon-accessory"></i>

<ion-option-button class="button-assertive" ng-click="remove(chat)">

Answer Source

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;