Foundation CSS Prototyping Utilities Border box
Last Updated :
29 Mar, 2022
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Prototyping Utilities Border box is used to add the content, padding, and border to the element. It will not give the margin within the width and height properties of CSS. In this article, we will discuss the prototyping utility border-box in Foundation CSS.
Foundation CSS Prototyping Utility Border box Class:
- border-box: This class is used to create the box with the border.
Syntax:
<div class="border-box">
...
</div>
Example: The following code demonstrates the Foundation CSS Prototyping Utility Border box.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Prototyping Utilities Border box </title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
</head>
<body style="margin-inline:10rem;">
<center>
<h2 style="color:green;"> GeeksforGeeks </h2>
<h3> Foundation CSS Prototyping Utilities Border box </h3>
<div class="callout border-box">
A Computer Science portal for geeks.
</div>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Border box
Reference: https://get.foundation/sites/docs/prototyping-utilities.html#border-box
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...