Does anyone know how to make a round-edged square box that is adjustable in size? Just like a webkit style box.
Does anyone know how to make a round-edged square box that is adjustable in size? Just like a webkit style box.
You need to add the -webkit-border-radius
property to the same element that has the border, for example:
<div style="border:1px solid black; -webkit-border-radius:10px;">Text</div>
You should also include the -moz-border-radius
property with the same value so that users can see the rounded edges with Firefox.
As for size, I have no idea how to change the size (I'm assuming you would need JavaScript), but if you want to be able to collapse the box, you should add the mw-collapsible
class to the same element. If you want it to be collapsed by default, you should also add the mw-collapsed
class as well.
But does moz display as a round edge even not using Firefox because if I remember correctly (I use Chrome) moz-border is a non-rounded edge. Or do you mean like one section needs to have a moz-border and antoher like webkit? Including them both?
You would have to use both:
<div style="border:1px solid black; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Text</div>
But border-radius - without prefix - works in all current browsers:
http://caniuse.com/#search=border-radius
Except for IE8 of course. But using a prefix won't help you in IE8 either :)
Ok, but that makes a rectangle long box. What about a square one just about 40x40 px that can be used with another row too. Like so 2 or more can fit into one line
border-radius
rounds corners. It doesn't make boxes of any sort. What gives you that idea?
I opened a new wiki and I thought if the wiki I am doing matches the game's tiles, that would be great. I am trying to do the homepage like the game's tiles. And the tiles are a round cornered square.
And the game's tiles are a yellow backgrounded square