Borders

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

Quick Code

Copy to clipboard <div style="border:3px blue double; padding:20px;">Text Goes Here</div>

## Introduction

**Border** is an HTML, CSS, and a WikiText attribute that changes the color, type, and size of an element's border. It is similar to the border radius.
Borders can surround textboxes, or `div` elements, and just plain text, or span elements. They have multiple attributes such as size, color, pattern, etc. which will all be covered in this article.

To create a border, type out this code in source mode

```
<div style="CODE">TEXT</div>
```

and replace the TEXT with whatever you want to put inside the border, and the CODE with any of the attribute codes below.

Text Goes Here

## Border Thickness

Border thickness is the simplest attribute. Just change the \_px in the border code - border:**1**px solid black, border:**3**px dashed blue. Greater numbers equal greater thicknesses and be sure to include the "px".

This is a 1px border. (Code: <div style="border:1px solid blue; padding:20px;">Text Goes Here</div>)

This is a 4px border. (Code: <div style="border:4px solid blue; padding:20px;">Text Goes Here</div>)

This is an 8px border. (Code: <div style="border:8px solid blue; padding:20px;">Text Goes Here</div>)

This is a 12px border. (Code: <div style="border:12px solid blue; padding:20px;">Text Goes Here</div>)

This is a 16px border. (Code: <div style="border:16px solid blue; padding:20px;">Text Goes Here</div>)

This is a 20px border. (Code: <div style="border:20px solid blue; padding:20px;">Text Goes Here</div>)

## Border Patterns

Borders come in a variety of patterns. To change the pattern, change the middle item in the border code - border:1px SOLID black, border:3px DASHED blue.

This is a solid border. (Code: <div style="border:3px solid blue; padding:20px;">Text Goes Here</div>)

This is a dashed border. (Code: <div style="border:3px dashed blue; padding:20px;">Text Goes Here</div>)

This is a dotted border. (Code: <div style="border:3px dotted blue; padding:20px;">Text Goes Here</div>)

This is a double border. (Code: <div style="border:3px double blue; padding:20px;">Text Goes Here</div>)

This is a groove border. (Code: <div style="border:8px groove lightgrey; padding:20px;">Text Goes Here</div>)

This is an inset border. (Code: <div style="border:8px inset lightgrey; padding:20px;">Text Goes Here</div>)

This is an outset border. (Code: <div style="border:8px outset lightgrey; padding:20px;">Text Goes Here</div>)

This is a ridge border. (Code: <div style="border:8px ridge lightgrey; padding:20px;">Text Goes Here</div>)

## Border Color

Border color, like the thickness, is fairly simple. Change the last item in the border code - border:1px solid BLACK, border:3px dashed BLUE. You can use a HEX code, a color name, an RGB code, or whatever you'd like to represent the color.

This is a blue border made using color names. (Code: <div style="border:5px solid blue; padding:20px;">Text Goes Here</div>)

This is a magenta border made using hex codes. (Code: <div style="border:5px solid #aa00aa; padding:20px;">Text Goes Here</div>)

This is a orange border made using RGB. (Code: <div style="border:5px solid rgba(255,0,0,0.5); padding:20px;">Text Goes Here</div>)

### Border Multi-Color

This is how the border with Multi-Color made using color names and hex codes. (Code: <div style="border:5px solid; padding:20px; border-color: blue #FF7F7F #aa00aa;">Text Goes Here</div>)

#### Border Double Multi-Color

This is how the border double with Multi-Color made using color names and hex codes. (Code: <div style="border:5px double; padding:20px; border-color: blue #FF7F7F #aa00aa;">Text Goes Here</div>)

## Offset Borders (Outline)

Offset borders can be created by using a similar attribute: outline. When you're done, it will look like a double border--except it could be a double dotted border or a double dashed border. You can also specify *how far* away from each other the two borders are.

First, specify what type, color, and width you want your border to be, like above. Then, replace the 'border' with 'outline'. Now you have a very similar look, but there's one more step for an offset border. Type in the following:

```
outline-offset:__px;
```

Dotted border example:

Fill in the blank with a number (positive or negative). It should look something like this:

See how there is a border INSIDE another border? This is because you can pair the 'border' attribute, and the 'outline' attribute together!

The code for this:

```
<div style="outline: 2px dotted black; outline-offset: -6px; border: 2px dotted black; padding:15px">TEXT</div>
```

Dashed border example:

See how there is a border INSIDE another border? This is because you can pair the 'border' attribute, and the 'outline' attribute together!

The code for this:

```
<div style="outline: 2px dashed black; outline-offset: -6px; border: 2px dashed black; padding:15px">TEXT</div>
```

## Fitting Around Text

Borders will by default, span across the screen. If you'd like to have the border wrap around the content, you will have to set it in a table like so:

```
{| div style="border:_px solid ;"

```

The end result should look something similar to this:

## Gradient Borders

Gradient borders are similar to multi-color borders. They can be created by using the 'Border Image' attribute.

Before you can start adding colors you have to put a border:

```
border:_px solid
```

Then you can add the gradient!

```
border:_px solid; border-image: linear-gradient(to top left, color, color) 1;
```

See, look at how the border is a gradient!

The code for this:

```
<span style="border:5px solid; border-image: linear-gradient(to top left, cyan, magenta) 4;height:150px;padding:5px;">See, look at how the border is a gradient!</span>
```

Note that if you would like to finish off your border, please insert **</div>** when using div style or **</span>** when using span style!

**NOTE: The order of *border* and *border-image* matters, putting the *border* attribute after *border-image* will not render your result as expected. Always put *border* before *border-image* and remember to add a number at the end right before the semi-colon(;) of *border-image*. The number at the end right before the semi-colon(;) represent the number of how many colors in the *linear-gradient* code input**

### Rounded gradient borders

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

## Right, Left, Bottom, and Top Borders

Another feature you can do with borders is putting the border only on one side of the element. The code for that would be:

```
<div style="border-_:_px *border type* *color*"></div>
```

Replace the first \_ with top, bottom, left, or right. And the second \_ with the thickness of the border you want.

An example of how it looks like is this:

Text here!

The code used for that:

```
<div style="padding:10px;border-left:10px solid yellow;height:50px;width:200px;background:white">See that yellow border? That's what it looks like!</div>
```