OG Image Border Radius: Do Social Platforms Crop or Round Your Images?

Which social platforms apply border radius to OG images, how to design for it, and safe zone guidelines for Twitter, LinkedIn, Discord, Slack, and Facebook.

The short answer: yes, several do

Most developers design OG images assuming they'll be displayed as sharp rectangles. In reality, several major social platforms apply CSS border-radius or visual clipping to link preview cards — which means sharp-corner designs can look great on one platform and awkward on another. Understanding exactly which platforms round, crop, or mask OG images lets you design images that look polished everywhere.

Platform-by-platform breakdown

Twitter / X

Twitter applies a border radius of approximately 12–16 px to summary_large_image cards. The rounding is applied via CSS to the image container, not baked into the image itself. All four corners are rounded equally. The image is also cropped to a 2:1 aspect ratio (e.g., 1200×600 px effectively, even if your source is 1200×630 px — the top/bottom may be clipped slightly).

LinkedIn

LinkedIn applies a small but visible border radius to link preview images — approximately 4–8 px. Content sitting at the very edge of your image may be clipped. LinkedIn also crops to a 1.91:1 aspect ratio (approximately 1200×628 px). Images that are too tall will be center-cropped.

Discord

Discord applies a 4 px border radius to embedded OG images. The effect is subtle but visible on screenshots shared in high resolution. Discord also enforces a max-width of 400 px for embedded images in chat — your 1200×630 px source is scaled down significantly.

Slack

Slack's unfurl cards apply no visible border radius to OG images as of 2025. Images appear as sharp rectangles inside the unfurl container. However, Slack limits the display width to approximately 360 px, so small text near edges may be hard to read.

Facebook

Facebook applies a very small border radius (~2–4 px) on some surface areas (e.g., shared posts in the feed). In most views the rounding is negligible. More impactful is Facebook's aggressive center-crop for non-standard ratios — always use 1200×630 px for feed posts.

WhatsApp

WhatsApp applies a 4–8 px border radius on iOS. On Android the rounding may be slightly different. The image is displayed at a small size (~200 px wide) so the rounding effect is barely perceptible but still clips sharp corner content.

Safe zone guidelines for OG image design

To ensure text, logos, and important visual elements are never clipped by border radius or platform-specific crops, maintain an inset safe zone in your OG image design:

  • Inner safe zone: Keep all important content at least 40–60 px from each edge of a 1200×630 px canvas.
  • Corner safe zone: Avoid placing logos or text within 60 px of any corner diagonally — border radius will clip content there most aggressively.
  • Top/bottom crop buffer: Twitter center-crops to 600 px tall from a 630 px canvas. Keep critical content within the middle 560 px vertically.
/* OG image safe zone for CSS-based generation (e.g., satori) */
const safeZoneStyle = {
  width: "1200px",
  height: "630px",
  padding: "60px",           /* 5% inset from each edge */
  boxSizing: "border-box",
};

/* Safe zone in Figma: 
   Create a 1080 × 510px rectangle, centered on the 1200×630 artboard.
   All text, logos, and CTAs stay inside this inner rectangle.
*/

Design tips for rounded corners

If you know your image will be rounded by the platform, you have two choices:

  • Ignore the rounding and rely on safe zone spacing. Simple, clean designs with padded content look fine after platform rounding. Avoid hard-edged geometric shapes that reach the image boundary.
  • Bake the radius into your image — generate OG images with border-radius: 16px applied to the outer container and a matching background color behind it. This ensures consistent rendering across platforms that don't apply their own radius.
// Satori example: bake border-radius into the OG image
const ogElement = {
  type: "div",
  props: {
    style: {
      width: "1200px",
      height: "630px",
      background: "#0f0f0f",
      borderRadius: "24px",           // Baked into image
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      padding: "80px",
    },
    children: {
      type: "h1",
      props: {
        style: { color: "white", fontSize: 72 },
        children: "Your Title Here",
      },
    },
  },
};

How to test border radius on each platform

The fastest way to see exactly how your OG image renders on each platform — including how the border radius and crops look — is to paste your URL into OGFixer. It shows simultaneous previews for Twitter, LinkedIn, Discord, Slack, and Facebook so you can spot clipping issues without manually posting to each platform.

See your OG image across all platforms

Check how border radius and cropping affects your image on every platform at OGFixer — free, instant, no login.

Related guides