Border Effects

Developer
Joanne Whelan
Size
1,998 Kb
Views
6,072
  1. Border Effects Previews
  2. Border Effects HTML Codes
  3. Border Effects CSS Codes

How do I make an border effects?

CSS Border Effects; border-radius. What is a border effects? How do you make a border effects? This script and codes were developed by Joanne Whelan on 16 January 2023, Monday.

Border Effects Previews
IQ Test

Border Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Border Effects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CSS Border Effects</h1>
<a href="cart.html" class="btn">Add to cart</a>
<p><br>The border radius can be one value (in this example 1rem).<br> Or you can round off select corners, for example;<br>
border-top-left-radius: 1rem; <br>
border-top-right-radius: 1rem; <br>
border-bottom-left-radius: 0; <br>
border-bottom-right-radius: 0; <br>
This is shown below:<br><br>
</p>
<a href="cart.html" class="btn2">Add to cart</a>
<p>
<br> Another effect is making irregular shapes:
</p>	<img class="poster" src="https://s3.amazonaws.com/auteurs_production/post_images/17514/Frank.jpg?1418357012" height="300">
<p>
<br> This is done by using twin radius values to create ellipses. The first value sets a horizontal radius and the second a vertical radius.
</p>	<img class="poster2" src="https://s3.amazonaws.com/auteurs_production/post_images/17514/Frank.jpg?1418357012" height="300">
</body>
</html>

Border Effects - Script Codes CSS Codes

* { font-family: helvetica;
}
.btn { padding: 1rem 1.25rem .75rem; background-color: rgb(188, 103, 108); border: 5px solid rgb(140, 69, 73); text-decoration: none; color: black; border-radius: 1rem;
}
.btn2 { padding: 1rem 1.25rem .75rem; background-color: rgb(188, 103, 108); border: 5px solid rgb(140, 69, 73); text-decoration: none; color: black; border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.poster{
border-top-left-radius: 5px 30px;
border-top-right-radius: 30px 60px;
border-bottom-left-radius: 80px 100px;
border-bottom-right-radius: 40px 100px;
}
.poster2{ border-radius: 0 100px 100px 100px ;
} /*using shorthand way of writing starting top left going clockwise*/
Border Effects - Script Codes
Border Effects - Script Codes
Home Page Home
Developer Joanne Whelan
Username jooonebug
Uploaded January 16, 2023
Rating 3
Size 1,998 Kb
Views 6,072
Do you need developer help for Border Effects?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joanne Whelan (jooonebug) Script Codes
Name
Responsive Basic Layout with Flexbox
Class Selector
ID Selector
Colour Palette Demo
Pseudo Selectors
Simple Layout
JQuery Wishlist Button
Figure
Wishlist
Image link
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!