🦁 woxi

The border is done with border-image. It's split into style attributes to work in a post, but the version on Froggy Chore itself is this:

.dialog-box {
  border: 32px solid transparent;
  border-image-source: url("https://cdn.glitch.com/59c2bae2-f034-4836-ac6d-553a16963ad6%2Ffroggy-border.png?v=1579422280072");
  border-image-slice: 32;
  border-image-repeat: round;
  border-image-width: 32px;
}

The border-image-slice docs in particular can explain how the image is sliced into corners and sides and the sides tiled better than I can.

The inside is a flexbox layout, which may be a little complicated if you're not familiar with it / don't have much CSS experience:

.dialog-box {
  display: flex;
  flex-direction: row;
  gap: 16px; /* Space between portrait / text */
}

.portrait {
  flex: 0 0 auto;
}

.text {
  flex: 1;
}

It sets up the dialog box to lay its children out horizontally. The magic bit is flex: 0 0 auto;. The first two 0s prevent the portrait image from growing or shrinking across the flex (horizontal) axis. The auto is a bit complicated if you get precise about how it behaves, but 9/10 times I use it it just sets the element's width or height to be what it normally would be without any stretching or shrinking.

Because the portrait is set to not flex at all, the text automatically takes up the rest of the dialog box since it does flex. If you add more text it will expand the box downward without encroaching on the portrait.

Flexbox is also nice for this because of tricks like using flex-direction: row-reverse to flip the order if you want a portrait on the right instead of the left. It also is flexible to any size portrait, and you can add extra styling to the portrait like a border frame without having to muck with the rest of the CSS.

Hope that helps!