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

> Learn to configure card border radius and hide borders in GitHub Readme Stats easily. This guide shows you how to use query parameters to customize your SVG cards for a clean look.

- Repository: [Anurag Hazra/github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
- Tags: how-to-guide
- Published: 2026-02-28

---

**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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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:

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

```

Set a custom corner radius of 12 pixels:

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

```

Combine both parameters for a borderless card with rounded corners:

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

```

Apply the same parameters to other card endpoints:

```markdown
<!-- 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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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`](https://github.com/anuraghazra/github-readme-stats/blob/main/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.