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