Adding border-radius to TinyMCE textarea

Question

Is it possible to add a border-radius to TinyMCE'd textareas? It's kinda killing me that I have rounded corners on my input fields etc, but I can't get it working on my textarea.. Probably because TinyMCE is turning it into an IFRAME? Is there any way around this? Thanks a lot!

what he wants is perfectly clear. he would like to have a border around the iframe that tinymce creates, good question +1 — Thariama, May 05 '11 at 11:17

score 1 · Accepted Answer · answered May 05 '11 at 11:45

1

One solution is to use the editor_css setting. This css gets applied after the default tinymce css is loaded thus overwrite the default one.

I created a file called editor.css containing the following

.defaultSkin table.mceLayout {border:1px solid black}

and set the tinymce parameter using editor_css

editor_css : 'path_to_css'.'/editor.css',

This creates a nice thin black line around the editor.

answered May 05 '11 at 11:45

Thariama

50,002
13
138
166

This seems to work for a 1px solid black border, but it doesn't do anything when I add border-radius. More importantly though, it messes up my TinyMCE buttons :( Thanks though! – Joris Ooms May 05 '11 at 14:28
can you explain, what exactly gets messed up? i am sure that only the css in the editor.css needs to be set correctly – Thariama May 05 '11 at 14:45
what browser do you use? IE is capable of handling border-radius till version 9 – Thariama May 05 '11 at 14:57

score 0 · Answer 2 · answered Jan 19 '16 at 11:43

Another way is to programmatically add classes to TinyMCE container on init:

textarea.tinymce({
    setup: function(editor) {
        editor.on('init', function() {
            editor.getContainer().className += ' with-border';
        });
    }
});

CSS:

.with-border {
    border: 1px solid black;
}

See Integration and Setup | TinyMCE documentation

The setup option allows you to specify an event that will be executed before the TinyMCE editor instance is rendered.

It works, just needed to force the style `border: 1px solid black !important` — Martin Staufcik, Dec 10 '16 at 21:43

score 0 · Answer 3 · answered Mar 16 '12 at 22:42

In order to add a border radius to a tinyMCE text area you will have to add the following css rules at the bottom of to the file: /themes/advanced/skins/default/ui.css. Note: If your are using a custom skin you will have to add these rules inside the css file you created for that skin.

#article_tbl, #article_ifr{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */    
}

$article_tbl{
  border: 1px solid silver;
}

#article_ifr{
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;    
}

#article_tbl{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */    
}

.mceToolbar{         
  -webkit-border-top-left-radius: 12px;
  -webkit-border-top-right-radius: 12px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.defaultSkin table.mceLayout tr.mceLast td {
  border-bottom: 1px solid silver;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

Adding border-radius to TinyMCE textarea

3 Answers3

Linked