Octagon Shape with Border – Stunning CSS

thumbnail

In this tutorial, we will creating octagon shape with border in CSS. We will create octagon shape with color green for the background and red color for the border. The width and height of 200px and 200px, respectively.

Example 1: The CSS for octagon shape with border is shown below

.octagonWrap {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
    overflow: hidden;
}
.octagon {
    position: absolute;
    top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background: green;
    border: 3px solid red;
}
.octagon:before {
    position: absolute;
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
}

For the full code HTML and CSS, you can use the below code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.octagonWrap {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
    overflow: hidden;
}
.octagon {
    position: absolute;
    top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background: green;
    border: 3px solid red;
}
.octagon:before {
    position: absolute;
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
}
</style>
</head>
<body>
 
<h2>Octagon Shape with Border</h2>
<div class='octagonWrap'>
    <div class='octagon'></div>
</div>
 
</body>
</html>

When you open it in the browser, the result will be:

Example 2: The CSS for octagon shape with border is shown below

.octagonWrap {
  background: red;
  width: 200px;
  height: 200px;
  position: absolute;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.octagon {
  position: relative;
  background: green;
  width: 190px;
  height: 190px;
  top: 5px;
  left: 5px;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

For the full code HTML and CSS, you can use the below code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.octagonWrap {
  background: red;
  width: 200px;
  height: 200px;
  position: absolute;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.octagon {
  position: relative;
  background: green;
  width: 190px;
  height: 190px;
  top: 5px;
  left: 5px;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
</style>
</head>
<body>
 
<h2>Example 2: Octagon Shape with Border</h2>
<div class="octagonWrap">
  <div class='octagon'></div>
</div>
 
</body>
</html>

When you open it in the browser, the result will be:

Example 3: The CSS for octagon shape with border is shown below

In this example, we will use svg to create octagon shape with border. For the full code, you can see the below code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
 
<h2>Example 3: Octagon Shape with Border</h2>
<svg viewBox="0 0 75 75" width="200px">
  <path d="m5,22 18,-18 28,0 18,18 0,28 -18,18, -28,0 -18,-18z" stroke="red" stroke-width="2" fill="green" />
</svg>
 
</body>
</html>

When you open it in the browser, the result will be:

Read another CSS tutorial at inpows.com.

Back To Top