Open In App

Bulma Radiusless

Last Updated : 02 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma Radiusless class is used to remove the radius from any element, add the is-radiusless modifier to any element, and any radius previously applied to that element will be removed.

Bulma Radiusless Classes:

  • is-radiusless: This class is used to remove the radius from any element.

Syntax:

<element class="is-radiusless">
    ...
</element>

Below example illustrate the Bulma Radiusless class

Example: The below example shows the use of the Bulma Radiusless class to remove the radius of an element. Since the tags and notification element in Bulma have a border-radius by default we will use those elements to show how the is-radiusless class works.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Bulma Radiusless Example</title>
    <link rel='stylesheet' 
          href=
</head>
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b class="is-size-5">
      Bulma Radiusless Example
    </b>
    <div class="container is-fluid">
  
        <p class="mt-5">
          <b>Default Notification element:</b>
       </p>
  
        <div class="notification is-link mt-2">
            <button class="delete"></button>
            GeeksforGeeks is a computer science 
            portal for geeks by geeks. Here
            you can find articles on various computer
            science topics like Data Structures, 
            Algorithms and many more.
        </div>
  
        <p class="mt-5">
          <b>Notification with 
            <i>is-radiusless</i>
            modifier:</b>
       </p>
  
        <div class="notification 
                    is-radiusless is-link mt-2">
            <button class="delete"></button>
            GeeksforGeeks is a computer science portal
            for geeks by geeks. Here you can find articles
            on various computer science topics like Data
            Structures, Algorithms and many more.
        </div>
    </div>
</body>
</html>


Output:

Bulma Radiusless

Bulma Radiusless

Reference: https://bulma.io/documentation/helpers/other-helpers/



Similar Reads

Bulma Align items
Bulma is a modern, free and open-source CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites fast. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Bulma align-items classes are used to
3 min read
Bulma Flexbox
Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. A flexbox is a layout used to define various columns and rows that makes the grid-like structure. It is used to design a flexible responsive layout structu
3 min read
Bulma | Tabs
Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Tabs in Bulma are simple responsive horizontal navigation tabs with different styles. They require the following structure: A container for the tabs.The HT
6 min read
Bulma Notification Colors
Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The notification is a simple colored block that draws the attention of the user to something. It can be used as a pinned notification in the corner of the vie
4 min read
Bulma Responsiveness
Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework. In this article, we will know about Bulma Responsive. Bulma is a component-rich, mobile-first CSS framework based on flexbox. Since Bulma is a mobile-first framework, it supports the following responsiveness features: Vertical by defa
4 min read
Bulma Panel Variables
Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaS
5 min read
Bulma Options
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to carry out its design.The ‘select’ component of a form is not that attractive in look. Using Bulma we can design select elements of the form in a far better way just by adding some
2 min read
Bulma Mobile Level
Bulma is an open-source CSS framework based on flexbox that can be used to make your web development faster as it comes with pre-built components and elements. In this article, we will be seeing Bulma Mobile Level. A level in Bulma is a multipurpose horizontal level that can contain any element inside it. All the elements inside the level are verti
2 min read
Bulma | Tags
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Bulma tag is a small element that is very useful to attach information to a block or other component. Example 1: Simple Tag elements &lt;html&gt; &lt;head
4 min read
Bulma Notification Light colors
Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The notification is a simple colored block that draws the attention of the user to something. It can be used as a pinned notification in the corner of the vie
4 min read