Css offers many interesting border styles. We want to show you 8 of them.

We are going to show not only examples, but also pre-made code, ready to apply in other projects.

The general style of each border presents below will be:

.border {
    padding: 10px;
    text-align: center;
}

1. Solid style – probably the one of most popular and basic style. It shows solid colored frame around your element.

.example-solid {
border: 5px solid red;
}
<div class="example-solid border">Solid border</div>
Solid border

 

2. Dashed style – really interesting type, which in our opinion it’s great for many things, especially for code blocks like on example below, where it’s used with textarea.

border dashed
.example-dashed {
border: 5px dashed red;
}
<div class="example-dashed border">Dashed border</div>
Dashed border

 

3. Dotted border – another noteworthy type, which frames the element with dots.

.example-dotted {
border: 5px dotted red;
}
<div class="example-dotted border">Dotted border</div>
Dotted border

 

4. Double border – as the name suggests, just ordinary frame, but doubled.

.example-double {
border: 5px double red;
}
<div class="example-double border">Double border</div>
Double border

 

5. Inset border – border like the solid one, but with second color, which depends on border-color attribute.

.example-inset {
border: 5px inset red;
}
<div class="example-inset border">Inset border</div>

 

Inset border

 

6. Outset border – inverted inset type

.example-outset {
border: 5px outset red;
}
<div class="example-outset border">Outset border</div>
Outset border

 

7. Ridge border – it looks like just solid border, but with 3d effect

.example-ridge {
border: 5px ridge red;
}
<div class="example-ridge border">Ridge border</div>

 

Ridge border

 

8. Groove border – next, a little bit different 3d border

.example-groove {
border: 5px groove red;
}
<div class="example-groove border">Groove border</div>

 

Groove border