Open In App

Foundation CSS Prototyping Utilities Border None

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilities Margin Helpers Classes in Foundation CSS.

In Foundation CSS, Prototyping Utilities Border none are used to sets the border property of any element to none.

Foundation CSS Prototyping Utilities Border none classes:

  • border: This class is used to apply the border property on any element.
  • border-none: This class is used to remove the border of any element.

Syntax:

<div class="callout border-none">
    ...
</div>

Example 1: Below is the example that illustrates the use of Prototyping Utilities Border none using the border class. 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Foundation CSS Prototyping Utilities Border None</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>GeeksforGeeks</h2>
  
    <h3>Prototyping Utilities Border none</h3>
  
    <div class="callout success border">
        GeeksforGeeks is a Computer Science Portal.
    </div>
  </center>
</body>
  
</html>


Output:

Foundation CSS Prototyping Utilities Border none

Foundation CSS Prototyping Utilities Border none

Example 2: Below is the example that illustrates the use of Prototyping Utilities Border none using the border-none class. 

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Foundation CSS Prototyping Utilities Border None</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>GeeksforGeeks</h2>
  
    <h3>Prototyping Utilities Border none</h3>
  
    <div class="callout success border-none">
        GeeksforGeeks is a Computer Science Portal.
    </div>
  </center>
</body>
  
</html>


Output:

Foundation CSS Prototyping Utilities Border none

Foundation CSS Prototyping Utilities Border none

Reference: https://get.foundation/sites/docs/prototyping-utilities.html#border-none



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads