Categories
CSS Web development

CSS Border Corner Shape: Scoop, Notch, Square-Cut

CSS Border Corner Shape

Demo:

*to see the CSS Border Shape: Scoop, Notch, Square-Cut tutorial output on the website click here.

To learn how to create: Scoop, Notch and Square-Cut corners in CSS follow the steps below:

SCOOPED CORNERS

<!doctype html>
<html>
<head>
<style>
.scoop {
  position: relative;
  font-size: 25px;
  font-family: arial black;
  z-index:1;
  left:100px;
  top:100px;
}

.scoop:before {
  z-index:-1;
  content:"";
  position: absolute;
  background: radial-gradient(circle at 0 0, transparent 15%, lightblue calc(15%)) top left, radial-gradient(circle at 100% 0, transparent 15%, lightblue calc(15%)) top right, radial-gradient(circle at 0 100%, transparent 15%, lightblue calc(15%)) bottom left, radial-gradient(circle at 100% 100%, transparent 15%, lightblue calc(15%)) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  width: 300px;
  height: 130px;
  left:-40px;
  top:-45px;
}
</style>
</head>
<body>
	<div class="scoop">Scooped Border</div>
</body>
</html>

Output:

CSS Scooped Corners

NOTCHED CORNERS

<!doctype html>
<html>
<head>
<style>
.notch {
  position: relative;
  width: 300px;
  height: 70px;
  background-color: lightblue;
  top:100px;
  left:100px;
  text-align: center;
  line-height:2.5;
  font-size: 25px;
  font-family: arial black;
}

.notch:before, .notch:after {
  position: absolute;
  content:"";
  border-right: 20px solid transparent;
  border-left:20px solid transparent;
  width: 260px;
  height:0;
  left:0;
}

.notch:before {
  border-top:30px solid lightblue;
  top:70px;
}

.notch:after {
  border-bottom:30px solid lightblue;
  top:-30px;
}
</style>
</head>
<body>
	<div class="notch">Notched Border</div>
</body>
</html>

Output:

CSS Notched Corners

SQUARE-CUT CORNERS

<!doctype html>
<html>
<head>
<style>
.squareCut {
  position: relative;
  z-index:1;
  top:100px;
  left:100px;
  font-size: 25px;
  font-family: arial black;

}

.squareCut:before, .squareCut:after {
  content:"";
  position: absolute;
  background-color: lightblue;
  z-index:-1;
}

.squareCut:before {
  width:300px;
  height: 90px;
  top:-25px;
  left:-22px;
}

.squareCut:after {
  height: 130px;
  width: 260px;
  left:-2px;
  top:-45px;
}

</style>
</head>
<body>
	<div class="squareCut">Square-Cut Border</div>
</body>
</html>

Output:

CSS Square-cut Corners

Enjoy coding!

Categories
CSS Web development

CSS Outline

The CSS Outline property is a line that is drawn around elements, outside the borders.

CSS Outline Property

The CSS outline property is shorthand of properties:

  1. outline-style
  2. outline-width
  3. outline-color

CSS Syntax:

outline: outline-width outline-style outline-color;

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.example {
  border: 5px solid yellow;
  outline: 5px dotted red;
}
</style>
</head>
<body>

<div class="example">The Outline is outside of any border.</div>

</body>
</html>

Output:

The Outline is outside of any border.

Outline styles:

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:blue;
   outline-width: 3px;
}
p.solid {outline-style: solid;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<p class="solid">A solid outline</p>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline.</p>
<p class="ridge">A ridge outline.</p>
<p class="inset">An inset outline.</p>
<p class="outset">An outset outline.</p>

</body>
</html>

Output:

A solid outline

A dotted outline

A dashed outline

A double outline

A groove outline.

A ridge outline.

An inset outline.

An outset outline.

Note: The CSS Outline property is different property than the CSS border! The Outline is drawn outside of the element’s border.

Enjoy coding!

Categories
CSS Web development

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

CSS Border radius

You can make “rounded corners” of the element/ image by adding a CSS border-radius property:

<!doctype html>
<html>
<head>
<title></title>
<style>
.square {
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius:25px;
	}
</style>
</head>

<body>
	<div class="square"></div>
</body>
</html>

Output:

CSS border-radius property

You can also apply a different radius to each corner of your element:

<!doctype html>
<html>
<head>
<title></title>
	<style>
.square {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius:25px 70px 30px 50px; /* top left, top right, bottom right, bottom left
	}
	</style>
</head>

<body>
	<div class="square"></div>
</body>
</html>

Output:

CSS border-radius

Note: The value of the border-radius from the example above:

border-radius:25px 70px 30px 50px; /* top left, top right, bottom right, bottom left

is a shorthand of the values below:

border-top-left-radius: 25px;
border-top-right-radius: 70px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 50px;

The radius does not need to be always a circle can be also more elliptical. Add the slash (“/”) between values:

<!doctype html>
<html>
<head>
<title></title>
<style>
         .square {
		width: 100px;
		height: 100px;
		background-color: red;
		border-radius:25px/50px;
		}
</style>
</head>

<body>
	<div class="square"></div>
</body>
</html>

Output:

CSS Advanced border-radius property

By using this method you can create some advanced CSS shapes of elements without using SVG:

CSS DROP/ DROPLET SHAPE

<!doctype html>
<html>
<head>
<title></title>
<style>
	.droplet {
            position: absolute;
            width:100px;
            height: 100px;
            border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
            background-color: lightblue;	
	    transform: rotate(-45deg);
		}
	</style>
</head>

<body>
	<div class="droplet"></div>
</body>
</html>

Output:

CSS Drop Shape

CSS LEMON SHAPE

<!doctype html>
<html>
<head>
<title></title>
<style>
		.lemon {
	    position: absolute;
            width:100px;
            height: 100px;
            border-radius: 10px 130px 30px 130px;
            background-color: yellow;	
		}
</style>
</head>

<body>
	<div class="lemon"></div>
</body>
</html>

Output:

CSS Lemon Shape

CSS LEAF SHAPE

<!doctype html>
<html>
<head>
<title></title>
<style>
		.leaf {
	    position: absolute;
            width:100px;
            height: 100px;
            border-radius:100% 0;
            background-color: green;	
		}
</style>
</head>

<body>
	<div class="leaf"></div>
</body>
</html>
CSS Leaf Shape

CSS EGG SHAPE

<!doctype html>
<html>
<head>
<title></title>
<style>
	.egg {
	    position: absolute;
            width:100px;
            height: 140px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background-color: beige;	
		}
</style>
</head>

<body>
	<div class="egg"></div>
</body>
</html>
CSS Egg Shape

Enjoy coding!

Categories
CSS Web development

CSS Glowing Gradient Border

CSS Glowing gradient border

Demo:

*to see the code on the website click here.

To create the CSS Glowing gradient border follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="gradient">
PURE CSS GLOWING GRADIENT BORDER
  </div>  
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #0b090a;
}

Create the gradient border effect by using the :after or :before pseudo-classes (you can read more about CSS Pseudo-elements here):

.container {
  max-width: 250px;
  padding: 2px;
  position: relative;
  z-index:1;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 
  margin-right:25px;
  filter: brightness(120%);
}

.container:before {
  z-index:-1;
  position: absolute;
  content:"";
  width:230px;
  height:230px;
  left:10px;
  top:0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 
  filter: blur(20px);
  
}

.gradient {
  background-color: #0b090a;
  padding: 30px;
  color: white; 
  font-size: 35px;
  font-family: arial;
  text-align: center;
}

To see the live output of the code go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Gradient Border

CSS Gradient Border

Demo:

*to see the live output of the code on the website click here.

To create the CSS Gradient border follow the steps below and watch the video tutorial:

Step1.

Add HTML

If you want to create square/ rectangle border:

<div class="container">
  <div class="gradient">
Type your text here...
  </div>  
</div>

If you want to create rounded border:

<div class="container-radius">
  <div class="gradient-border-radius">
Type your text here...
  </div>  
</div>

Step2.

Add CSS

Set the colour of the background and the position of the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;  
}

To read more how to create the gradient in CSS click here.

CSS for Square/ Rectangle border:

.container {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;   
  margin-right:25px;
}

.gradient {
  background-color: #fff;
  padding: 2rem;
  color: black;  
}

CSS for Rounded border:

.container-radius {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;
  border-radius: 7%;  
}

.gradient-border-radius {
  background-color: #fff;
  padding: 2rem;
  color: black;
  border-radius: 5%;  
}
CSS gradient borders
*to see the live output on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Multiple Borders

CSS Multiple Borders

We can achieve the CSS multiple border effect by using the :after and :before pseudo-classes (you can read more about CSS Pseudo-elements here).

Example:

*to see how the CSS multiple borders are looking on the website click here.

To achieve the CSS multiple borders effect follow the steps below and watch the video tutorial:

Add HTML

<div class="border">Type your text here.</div>

Add CSS

.border {
   position: relative;
   z-index: 1;
   padding: 95px;
   border: 5px solid #231942;
   background-color: #5e548e;
}

.border::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #9f86c0;
   background: #be95c4;
}

.border::after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #e0b1cb;
   background: #fff;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS HTML Web development

CSS Border Property

The CSS border properties define the width, line style, and colour of the border of a box.

CSS Border Property

Syntax:

border: border-width border-style border-color

where:

border-width – specifies the width of the border.

border-style – specifies style of the border.

border-color – specifies color of the border.

Example:

.square {
  border: 5px solid blue;
  height: 200px;
  width: 200px;
}

Output:

The border-style property specifies what kind of border to display:

dotted – defines a dotted border:

p.dotted {border-style: dotted;}

dashed – defines a dashed border:

p.dashed {border-style: dashed;}

solid – defines a solid border:

p.solid {border-style: solid;}

groove – defines a 3D grooved border. The effect depends on the border-color value:

p.groove {border-style: groove;}

ridge – defines a 3D ridged border. The effect depends on the border-color value:

p.ridge {border-style: ridge;}

inset – a 3D inset border. The effect depends on the border-color value:

p.inset {border-style: inset;}

outset – defines a 3D outset border. The effect depends on the border-color value:

p.outset {border-style: outset;}

rounded – the border-radius property is used to add rounded borders to an element:

p.round {border: 2px solid blue;border-radius: 12px;}

mixed – you can specify a different border for each side.

p.mix {border-style: dotted dashed solid double;}

multicolored-border – can have from one to four values (for the top border, right border, bottom border, and the left border).

p.color {border-style: solid;border-color: #ff0000;}

Enjoy coding!