Comment faire des coins ronds à la fois à l'intérieur d'une boîte et de son bord?

une autre solution consiste à combiner les bordures intérieure et extérieure avec border-radius est de "truquer" la frontière en utilisant le <spread-radius> valeur box-shadow propriété. Cela produit une ombre solide qui peut facilement passer pour une bordure régulière.

par exemple, pour obtenir une bordure 4px et un rayon de bordure blanc 4px, essayez ceci:

/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;

si vous voulez ajouter une ombre de goutte "réelle" à l'ensemble du conteneur, vous pouvez simplement enchaîner votre ombre des déclarations comme suit:

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);

Remarque: Conserver à l'esprit que l'ordre des instructions est l'ordre dans lequel il sera rendu.

la seule chose à éviter est que la "fausse bordure" initiale chevauchera les premiers pixels X (où X est la largeur de la bordure) de toute ombre que vous voulez sous elle (et combinez, si vous utilisez l'opacité RGBa sur elle en dessous de 100%.)

Donc il ne fonctionnera pas dans les situations, mais la majorité. Je l'utilise assez souvent quand les bordures régulières ne sont pas idéales.

Puisqu'il n'y a pas de telle chose que inner-border-radius pour CSS, les navigateurs le font par défaut à border-radius - border-width. Si vous n'aimez pas cela, la solution typique est de créer deux divs avec des bordures pour imiter le rayon intérieur de la bordure, mais cette solution apporte plus de design dans le html. C'est aussi une douleur si c'est un modèle de bordure commune utilisé tout au long du site.

j'ai réussi à trouver un moyen de garder tout cela dans css en produisant la div interne en utilisant :after et content: "". Donc, pour votre cas, il serait être:

.template-border {
    position: relative;
    border-radius: 5px;
    background-color: #000;
    border: 10px solid #000;
    z-index: -2;
}

.template-border:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #FFF;
    z-index: -1;
}

Vous avez besoin d'avoir deux éléments div, l'un dans l'autre, et d'utiliser un navigateur croix à coins arrondis en css, comme ceci:

.small-rounded {
    border: 1px solid ##000;
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
    border-radius: 5px;
}

Le problème n'est pas le codage de la CSS mais les mathématiques d'un cercle. Essentiellement votre border-inner-radius (je sais que cette propriété n'existe pas) est égale à la border-radius -border-width.

tout simplement déterminer ce que vous voulez que votre rayon intérieur soit, puis Ajouter la largeur de la bordure pour obtenir l'effet désiré.

border-inner-radius+ border-width= border-radius

.my-div
{
  background-color: white;
  border: solid 20px black;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
  height: 100px;
  left: 30px;
  position: relative;
  top: 20px;
  width: 200px;
}
.my-div:before
{
  background-color: white;
  border-radius: 5px;
  content: "";
  display: block;
  height: calc(100% + 20px);
  left: -10px;
  position: absolute;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 1;
}
.some-content
{
  height: calc(100% + 20px);
  left: -10px;
  position: relative;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 3;
}
.some-header
{
  background-color: green;
  border-radius: 5px 5px 0 0;
  height: 30px;
}

<html>
	<body>
		<div class="my-div">
			<div class="some-content">
				<div class="some-header">my title</div>
				<div>some other content</div>
			</div>
		</div>
	</body>
</html>

vous devez faire le rayon de bordure à une valeur supérieure à la largeur de bordure jusqu'à ce que vous commenciez à voir une courbe. Ce n'est pas une formule fixe pour définir le rayon de la bordure de +1px plus grand que la largeur de la bordure. Cependant, ce sera certainement une valeur positive. Vous devez expérimenter dans les différents navigateurs où vous avez besoin de cela jusqu'à ce que vous voyez la plus petite valeur de rayon de Frontière possible qui fonctionne assez bon pour vous dans la plupart des navigateurs. (Certains navigateurs peuvent ne pas le supporter. Par exemple, dans Google Chrome, j'ai réglé une largeur de bordure à 10px, mais j'ai dû régler le rayon de bordure à 13px avant de commencer à voir un semblant de courbe de bordure intérieure, tandis que 15px fonctionnait encore mieux.