Border Radius

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>

Border radius demos

Border radius is a CSS attribute that rounds the corners of an element, including its border. It can be used in regular HTML/CSS and WikiText.

You don't actually need a border to control border-radius. It also applies to things like background colors.

When adding a border-radius to a container, make sure that any text inside doesn't go outside the border. If it does, add more padding.

Basics

Border radius allows you to make borders/edges rounded. You can use this with or without an actual border. Here's the difference:

Without border radius

With border radius

Here's the code:

<div style="border: 5px solid thistle; border-radius: 25px; padding: 10px;">Text goes here</div>

You can specify border radius in different units, like px, %, or em. Here are some examples:

 

border-radius: 25%;

 

border-radius: 50%;

 

border-radius: 1em;

Different border radiuses for different corners

Maybe you'd like the border-radius to be different at each corner. You can do that! Just specify it like this:

border-radius: upper-left upper-right bottom-right upper-left;

Here's a handy visualizer:

⬉

border-radius: 50% 0 0 0;

⬈

border-radius: 0 50% 0 0;

⬊

border-radius: 0 0 50% 0;

⬋

border-radius: 0 0 0 50%;

There's also a shorthand in which you can specify 2 numbers only:

border-radius: upper-left/bottom-right upper-right/bottom-left;

⤡

border-radius: 50% 0;

⤢

border-radius: 0 50%;

Put it together and you can make some interesting shapes:

border: 5px solid thistle; border-radius: 25px 0;

border: 5px solid thistle; border-radius: 20px 20px 0 0;

A border radius without a border?

You can use the border-radius property even if you don't have a border.

A circular gradient

A digital leaf

Border-radius and Fandom images

	Fandom compatibility issue: Fandom images often aren't compatible with traditional CSS.

You might be excited to put a border radius on a picture! But, bad news... Fandom images and CSS don't always mix well.

Example:

What if we put an image in this circle?

Nope.
Border radius IGNORED

Don't let Fandom's quirks stop you from experimenting on other websites.

Examples

Violet double Border

Text

Code:

<div style="border: 7px double violet; padding: 10px; 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; padding: 10px; 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; padding: 10px; 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.

Examples (percentage)

Slightly Round border

Text

Code:

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

Resulting in an oval-ish shape.

Dashed Red border

Text

Code:

<div style="border: 3px dashed red; padding: 20px; border-radius: 50%;">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; padding: 10px; border-radius: 100em;">Text</div>

Resulting in something similar to using px.

Examples (px)

Text

Code:

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

Rounded Faux 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)

See also

• Borders
• Image Backgrounds
• Image Modification

External links

• border-radius CSS property at MDN
• CSS border-radius Property at w3schools