Styling text with a border

The basic borders have elements you can change such as:
• #px = the size of your border
• border style = the style of your border
• border-width = the width of your border
• #000000 = the color of your border

If you use one or found this useful a link back is appreciated :3

Basic Text Borders

Basic text border examples are displayed here as solid, double, dotted, dashed, groove, ridge, inset, outset, and mixed:

A solid border to give you a creative spark ^_^

A double border to give you a creative spark ^_^

A dotted border to give you a creative spark ^_^

A dashed border to give you a creative spark ^_^

A groove border to give you a creative spark ^_^

A ridge border to give you a creative spark ^_^

An inset border to give you a creative spark ^_^

An outset border to give you a creative spark ^_^

A mixed border to give you a creative spark ^_^

The codes for solid, double, dotted, dashed, groove, ridge, inset, outset, and mixed border are here:

<p class="bordersolid">A solid border to give you a creative spark ^_^</p>
<p class="borderdouble">A double border to give you a creative spark ^_^</p>
<p class="borderdotted">A dotted border to give you a creative spark ^_^</p>
<p class="borderdashed">A dashed border to give you a creative spark ^_^</p>
<p class="bordergroove">A groove border to give you a creative spark ^_^</p>
<p class="borderridge">A ridge border to give you a creative spark ^_^</p>
<p class="borderinset">An inset border to give you a creative spark ^_^</p>
<p class="borderoutset">An outset border to give you a creative spark ^_^</p>
<p class="bordermix">A mixed border to give you a creative spark ^_^</p>

Cool Text Borders

Just a bunch of cool text borders i'm slowing adding to show cool things you can do :p I like finding gradient examples from this website: https://uigradients.com/ For example the uiGradient I used directly below this example is called #Backtoearth. But you do you booboo, you can also just google hex/color codes to play around with when making borders or other things. You can have other borders like left, right, bottom and top as well.

Border Bottom

Border Top

Border Left

Border Right

Border

}

.box {
  width:150px;
  height:50px;
  background:powderblue;
  margin-bottom:20px;
 
}

.box1 {
   border-bottom:5px solid;
  border-top:0; 
  border-left:0; 
  border-right:0; 
  border-image:  linear-gradient(to bottom, #00c9ff  0%,#92fe9d 100%)1;
  
}

.box2 {
  border-top:5px solid;
  border-bottom:0; 
  border-left:0; 
  border-right:0; 
  border-image:  linear-gradient(to bottom, #00c9ff  0%,#92fe9d 100%)1;
}

.box3 {
  border-left:5px solid;
  border-top:0; 
  border-bottom:0; 
  border-right:0; 
  border-image: linear-gradient(to bottom, #00c9ff  0%,#92fe9d 100%)1;
  
}

.box4 {
  border-right:5px solid;
  border-top:0; 
  border-left:0; 
  border-bottom:0; 
  border-image: linear-gradient(to bottom, #00c9ff  0%,#92fe9d 100%)1;
  
}

.box5 {
   border:5px solid;
  border-image: linear-gradient(to bottom, #00c9ff  0%,#92fe9d 100%)1;
  
}

.boxText {
  display:table-cell;
  color:black;
  font-weight: bold;
  text-align: center;
  vertical-align:middle;
}
  </style>
  <center>
<div class="box box1">
<div class="boxText">
<p>Border Bottom</p>
</div>
</div>

<div class="box box2">
<div class="boxText">
<p>Border Top</p>
</div>
</div>
  
  
<div class="box box3">
<div class="boxText">
<p>Border Left</p>
</div>
</div>

<div class="box box4">
<div class="boxText">
<p>Border Right</p>
</div>
</div>

<div class="box box5">
<div class="boxText">
<p>Border</p>
</div>
</div>

Border with green & yellow gradient ^_^

RAINBOW ^_^

A bottom border for ya ^_^

I haven't mastered how to correctly center this yet -_-

"I believe that if one always looked at the skies, one would end up with wings." — Gustave Flaubert

border text aligned to the left with gradient
(not mobile friendly)

"I believe that if one always looked at the skies, one would end up with wings." — Gustave Flaubert

border text aligned left with gradient but centered
(mobile friendly)