Search code examples
csswordpresswordpress-gutenberg

Adding radius to outer border of Gutenberg Columns block


CSS:

.ts-about-columns {
  border: 2px solid #ccc;
  box-sizing: border-box;
  padding:2mm;
  -moz-border-radius: 5 !important;
  -webkit-border-radius: 5 !important;
  border-radius: 5 !important;
}

HTML:

<div class="wp-block-columns ts-about-columns">
  <div class="wp-block-column">
    <h3>Newsletter</h3>
    <p>Please consider ...</p>
    <p>The newsletter is ...</p>
  </div>
  <div class="wp-block-column">
    <h3>Support Forum</h3>
    <p>Have you visited ...</p>
    <p>Feel free to ...</p>
  </div>
</div>

Here is the page (Wordpress):

https://www.publictalksoftware.co.uk

Why can't I show the border in radius?

enter image description here

I am using the columns Gutenberg block, and have set the additional class correctly.


Solution

  • You need to specify units, e.g.

    border-radius: 5px !important;