How to Configure Card Border Radius and Hide Borders in GitHub Readme Stats

To configure card border radius and hide borders in GitHub Readme Stats, pass the border_radius and hide_border query parameters to any card endpoint, which directly manipulate the SVG rx attribute and stroke-opacity values in the generated output.

The anuraghazra/github-readme-stats repository generates dynamic SVG cards for showcasing GitHub metrics. Learning how to configure card border radius and hide borders in GitHub Readme Stats enables you to match these visual elements to your profile's theme. The customization relies on two query parameters that modify the underlying SVG generation logic in the Card class.

How Card Border Radius and Hide Borders Work in the Source Code

The Card Class Constructor and Border Radius

The core SVG generation logic resides in src/common/Card.js. The constructor accepts a border_radius parameter (lines 24-28), which defines the corner roundness for the card's background rectangle. This value is applied directly to the SVG <rect> element as the rx attribute at line 247, controlling the horizontal corner radius of the card background.

The setHideBorder Method and Stroke Opacity

Border visibility is controlled through the setHideBorder setter method (lines 84-90 in src/common/Card.js). When the hide_border option is enabled, this method sets an internal flag that forces the SVG border's stroke-opacity to 0 at line 256 (stroke-opacity="${this.hideBorder ? 0 : 1}"), effectively rendering the border invisible while preserving the layout structure.

Configuring Border Radius and Hide Borders via API Parameters

The API layer in api/index.js extracts both parameters from incoming request query strings and forwards them to the card renderers. The hide_border parameter is parsed as a boolean using parseBoolean(hide_border), while border_radius is passed as a numeric string.

These options are universally supported across all card types, including:

• Stats cards (renderStatsCard)
• Top languages cards
• Repository cards
• Gist cards
• WakaTime cards

Implementation Examples for All Card Types

To apply these customizations, append the parameters to any GitHub Readme Stats API URL. The border_radius accepts numeric values (representing pixels), while hide_border accepts true or false.

Hide the border completely on a stats card:

![Stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide_border=true)

Set a custom corner radius of 12 pixels:

![Stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_radius=12)

Combine both parameters for a borderless card with rounded corners:

![Stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide_border=true&border_radius=15)

Apply the same parameters to other card endpoints:

<!-- Top Languages with hidden border -->
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs?username=anuraghazra&hide_border=true)

<!-- Repository card with custom radius -->
![Repo Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&border_radius=8)

<!-- WakaTime stats with both options -->
![WakaTime](https://github-readme-stats.vercel.app/api/wakatime?username=anuraghazra&hide_border=true&border_radius=10)

Summary

• The border_radius parameter in src/common/Card.js (line 247) controls the SVG rx attribute, determining how rounded the card corners appear.
• The hide_border parameter invokes setHideBorder() (lines 84-90), which sets stroke-opacity to 0 (line 256) to eliminate the visible border while maintaining the card structure.
• Both parameters are parsed in api/index.js and supported universally across all card types including stats, top-langs, repo, gist, and WakaTime cards.
• Values are passed as URL query parameters: border_radius accepts numeric values, while hide_border accepts boolean strings (true/false).

Frequently Asked Questions

What is the default border radius for GitHub Readme Stats cards?

The default border_radius value is defined in the Card class constructor in src/common/Card.js. If not specified in the URL, the card uses the internal default (typically 4.5), which produces a subtle rounded corner effect on the SVG background rectangle.

Can I use hide_border and border_radius together on the same card?

Yes, both parameters function independently and can be combined in a single request URL. When used together, the border_radius parameter rounds the card corners while hide_border=true removes the stroke outline, creating a floating card appearance without a visible border line.

Do these parameters work on all card types including Top Languages and Repo cards?

Yes, the border_radius and hide_border parameters are implemented in the base Card class (src/common/Card.js) and are universally supported across all card renderers. This includes the stats card, top-languages card, repository pin cards, gist cards, and WakaTime cards, as all rendering functions pass these options to the shared Card constructor and setHideBorder method.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}