ronpat
February 20, 2017, 4:17am
21
Unfortunately not. box-shadows do not respond to the border-radius property.
However… that isn’t the real issue.
The problem is that .box has no dimensions. By default it is a square.
Try giving .box some dimensions, maybe {width:10px, height;10px;}
and then add {border-radius:50%} and see what you think.
https://jsfiddle.net/Lqu7rgqk/7/
2 Likes
asasass
February 20, 2017, 1:38pm
22
When setting a fixed height and with of a box, how can I fill in the empty space in the middle?
Middle empty space.
Fill in with the piece?
30px / 30px fits right in the middle.
The “empty space” is the 30px by 30px box you created. You can adjust it to whatever size you want.
Create a smaller initial box and make the first colour stripes green and black.
asasass
February 20, 2017, 1:44pm
24
It needs to be fixed w and h.
Blue last, blue in the middle.
You’ve just said you want that green and black piece in the middle, but use whatever colours you want. To reduce the size of the middle square, reduce the pixel dimensions.
asasass
February 20, 2017, 1:48pm
26
I’ve been using this for that.
Sorry, you’ve lost me. I don’t understand what that table has to do with it.
Your code has this:
.box {
width:30px;
height:30px;
and then the box-shadow information. If you want the inner square to be smaller, then reduce the size from 30px to whatever suits.
asasass
February 20, 2017, 1:57pm
28
How would I reduce the size of the circle?
Which circle? I see no circle in either your image or your fiddle.
asasass
February 20, 2017, 2:34pm
30
asasass:
This works even better.
For what? Why do you require a multiplication table? How is it relevant to this discussion?
TechnoBear
Split this topic
February 20, 2017, 2:46pm
32
A post was split to a new topic: Fitting a table into Google docs
system
Closed
May 22, 2017, 9:46pm
33
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.