Questions tagged [border-radius]
166 questions
38
votes
5 answers
Border-radius doesn't affect inner elements
I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that…
diracdeltafunk
- 1,178
- 2
- 10
- 24
4
votes
0 answers
Why the shape of box-shadow become a round rectangle
Recently, probably because of the chrome browser update, the previous normal ripple animation effect has become abnormal, when the box-shadow spread is greater than 1em, it is no longer round, and I do not see where there is relevant…
sensen
- 77
- 4
4
votes
2 answers
Make pixeled border-radius
I have a game that looks a bit like a game from 1980. And i have this dialog:
#firstPageText {
width: 300px;
min-height: 100px;
border: 2px solid;
padding: 1em;
margin: 0;
…
user16262715
4
votes
1 answer
Strange button styling on chrome on iOS
I have a bunch of cards on a site that I'm working on. They display some content pulled from a database, and when clicked link to a more detailed content page for that particular card. Everything is working great, across all browsers and screens,…
Evan Moses
- 61
- 6
4
votes
1 answer
Border radius of table not working due to border-collapse property
My border radius does not show if I have the property of border-collapse on the table tag. I need the border-radius property on and if I remove the border-collapse property I don't get the look I want which is the grey sections to go to the very…
Paul M
- 435
- 4
- 13
4
votes
0 answers
Border radius breaks while running CSS animation in Google Chrome
Here is the CSS animation I am playing:
#mydiv{
width: 700px;
height: 100px;
border-radius: 50px;
background-color: rgb(20, 20, 20);
position: relative;
overflow: hidden;
top: 50px;
}
#mydiv:before{
content: "";
width: 20%;
…
Sadman Rizwan
- 189
- 1
- 2
- 14
3
votes
1 answer
How to add inner border radius of shadow div in react native
How do i apply inner border radius to my element like below, border radius applies it to outside shadow
What mine looks like:
Code:
const getCheckListData = (): React.ReactNode => {
return checkListJSON.map(
(checklist:…
vini
- 4,657
- 24
- 82
- 170
3
votes
1 answer
Cropping children based on parent's border-radius
In the example snippet below, I try to impose on the last child of the .container element the same border-radius as .container, so that when that last child gets highlighted upon hovering, its background follows the shape of the parent. This seems…
Enlico
- 23,259
- 6
- 48
- 102
3
votes
2 answers
border radius of a div inside another div is overlapping
I am making this card using React, HTML and CSS
Here is my Code:
2
votes
1 answer
Iframe on applying border radius have thin curve lines on the 4 corners
I am using material UI's CardMedia component to render an Iframe where I have embedded a youtube link. I want the iframe to have rounded corners so I have set the border-radius to 30px. It's working, but the problem is that it also brings some thin…
Banka
- 90
- 1
- 11
2
votes
0 answers
JavaFX CSS - How to curve a border radius outwards?
I am trying to give a tab the following effect when being selected:
Example image
You can see the selected export tab's bottom right corner curving over on top of the other tab.
How could this be implemented using CSS or code?
I have tried utilising…
Valtteri Valo
- 41
- 2
2
votes
1 answer
How to hide overflow on the bottom of a container and still allow the image to escape the top of the container
I've cut out an image of a person and I would like to use overflow: hidden to hide the bottom of the image along the line of my container so that it looks like the image is inside the container, but then allow it to expand out of the container on…
Thomas Harbin
- 23
- 4
2
votes
4 answers
Adding Transform CSS property to div modifies its border-radius
I have 2 div elements: a parent and its child, and need to have rounded corners on both of them. Setting border-radius to for example 20px usually does that, but once I add transform property to child specifically scaleX, border-radius becomes…
Ivditi Gabeskiria
- 302
- 1
- 2
- 9
2
votes
1 answer
Flutter - No BorderRadius assignment
When I build the application, I encounter such an error.
lib/input_page/pacman_slider.dart:41:7: Error: A value of type 'Animation' can't be assigned to a variable of type 'Animation' because 'BorderRadius?' is nullable and…
mdgrdg
- 21
- 3
2
votes
2 answers
What is the equivalent of border-radius in roblox studio?
I have been previously working with css and there is a property in that i.e., border-radius with which i can change the radiuses of all the four sides independently. Now i have started making roblox games and i want to round my GUI elements but i…
Learner
- 77
- 6