grensradius werkt niet

Ik werk aan een eenvoudige diven om de een of andere vreemde reden is border-radius: 7pxer niet op van toepassing.

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px; // not working
}

Antwoord 1, autoriteit 100%

Voor wie dit probleem ook heeft. Mijn probleem was het instorten van de grens. Het was ingesteld op:

border-collapse: collapse;

Ik heb het ingesteld op:

border-collapse: separate; 

en het probleem is opgelost.

Antwoord 2, autoriteit 49%

Voor iedereen die dit probleem in de toekomst tegenkomt, moest ik toevoegen

perspective: 1px;

op het element waarop ik de randradius aan het toepassen was. Definitieve werkende code:

.ele-with-border-radius {
    border-radius: 15px;
    overflow: hidden;
    perspective: 1px;
}

Antwoord 3, autoriteit 33%

Om iets toe te voegen aan het antwoord van @ethanmay: (https://stackoverflow.com/a/44334424/8479303)…

Als er inhoud binnen de divis met de gebogen hoeken, moet u overflow: hiddeninstellen omdat anders de overloop van de onderliggende div de indruk kan wekken dat de border-radiuswerkt niet.

<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
  <div style="background: red;">
      text!
  </div>
</div>
<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
  <div style="background: red;">
      text!
  </div>
</div>

JSFiddle:
http://jsfiddle.net/o2t68exj/

Antwoord 4, autoriteit 25%

Ik markeer alleen een deel van het antwoord van @Ethan May, namelijk

overflow: hidden;

Het zou hoogstwaarschijnlijk het werk voor uw zaak doen.

Antwoord 5, autoriteit 10%

Om de een of andere reden maakt je padding: 7px-instelling de border-radius teniet. Verander het in padding: 0px 7px

Antwoord 6, autoriteit 9%

in je div class=”social-box” css

gebruik

           float:right 

in plaats van

            float:left

Antwoord 7, autoriteit 2%

Uw probleem heeft niets te maken met hoe u border-radiusheeft ingesteld. Start Chrome en druk op Ctrl+Shift+jen inspecteer het element. Schakel widthuit en de rand zal gebogen hoeken hebben.

Antwoord 8, autoriteit 2%

Nu gebruik ik de browserkit als volgt:

{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}

Antwoord 9, autoriteit 2%

Probeer !importanttoe te voegen aan je css. Het werkt voor mij.

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px!important;
}

Antwoord 10

als je een bovenliggend element hebt, dan moet je bovenliggende element overflow hebben: hidden; eigendom
want als de inhoud van uw kinderen overloopt van de bovenliggende rand, is uw rand zichtbaar. Anders werkt uw grensradius, maar wordt deze verborgen door de inhoud van uw kinderen.

.outer {
  width: 200px;
  height: 120px;
  border: 1px solid black;
  margin-left: 50px;
  overflow: hidden;
  border-radius: 30px;
}
.inner1 {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#FF9933,white, green);
  border: 1px solid black;
}

<div class="outer">
  <div class="inner1">
  </div>
</div>

    // style file
     <link rel="stylesheet" href="css/style.css" />
     // bootstrap file
     <link rel="stylesheet" href="css/bootstrap.min.css" />

   // bootstrap file
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    // style file
    <link rel="stylesheet" href="css/style.css" />