Border Radius

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

This article is about changing the rounding or radius of borders, you may be looking for Borders instead.

Quick Code

Copy to clipboard <div style="border-radius: 20px;border: 1px solid red;">Text Goes Here</div>

## Introduction

**Border radius** is a CSS, HTML, and WikiText attribute that rounds the corners of an element's border. It is an incredibly useful element, but a rounder border-radius may make the text go out of the border (which often can be fixed with padding). However, it is not to be confused with borders, which simply puts the border in place. Go to the Borders page if you want to change the color or style of one of the below examples.

## Examples

### Violet double Border

Text

Code:

```
<div style="border: 7px double violet; border-radius: 20px">Text</div>
```

Resulting in a violet border with a border-radius of 20.

### Different-sided Blue border

Text

Code:

```
<div style="border: 3px solid blue; border-radius: 10px 0px;">Text</div>
```

Resulting in a blue border with two sides that are different.

### Rounded Top Border

Text

Code:

```
<div style="border: 3px dashed blue; border-radius: 10px 10px 0px 0px;">Text</div>
```

Resulting in a yellow border with a rounded top and flat bottom.

## Border-radius in percentage and em

When you use **percentage**, the edge radius is very elliptic and starts at the middle of each side element, which results in an oval-ish shape.

When you use **em** or **px**, the edge radius is always a circular arc or a pill shape.

### Slightly Round border

Text

Code:

```
<div style="border-radius: 20%;border: 3px solid violet;">Text</div>
```

Resulting in an oval-ish shape.

### Dashed Red border

Text

Code:

```
<div style="border: 3px dashed red; border-radius: 1000%;">Text</div>
```

Resulting in an red dashed border that looks like an oval.

### Dotted Circle/Oval

You can make a circular shape if you put the border radius as 100%. To make a circle, the width and height have to be the same \*number\*px.

Text

Code:

```
<div style="border:dotted red 2px; width:100px; height:100px; border-radius:100%; padding:30px;"><center>Text</center></div>
```

You can change the width and height to make an oval.

Text

Code:

```
<div style="border:dotted red 2px; width:200px; height:100px; border-radius:100%; padding:30px;">
<center>Text</center></div>
```

### Examples (em)

Text

Code:

```
<div style="border:3px solid red; border-radius: 100em;">Text</div>
```

Resulting in something similar to using px.

### Examples (px)

Text

Code:

```
<div style="border:3px solid red; border-radius: 100px 0px">Text</div>
```

## Rounded Gradient Border

Set the background to a linear gradient with round borders, then use span to set the text part of the background to a solid color also with less rounded borders. **If it doesn't make sense, look at the example below.**

Example:

Text Here

```
<div style="background:linear-gradient(to right, #05fbff, #1e00ff); padding:3px; border-radius:40px; display:inline-block;"><span style="display:block; background:#ffffff; padding:1em 3em; border-radius:40px;">Text Here</span></div>

```

Coding Credits (external)

## Further Reading

For more information on borders, visit the Borders page!