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.
Border Thickness
Border thickness is the simplest attribute. Just change the _px in the border code - border:1px solid black, border:3px dashed blue. Greater numbers equal greater thicknesses and be sure to include the "px".
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.
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.
Border (multi-colour)
Border Double Multi-Color
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:
The code for this:
<div style="outline: 2px dotted black; outline-offset: -6px; border: 2px dotted black; padding:15px">TEXT</div>
Dashed border example:
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 ;"
|Text Here
|}
The end result should look something similar to this:
| Text Here |
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:
<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>
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:
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>