Inzwischen gehört border-radius in den modernen Browsern zu den etablierten CSS-Eigenschaften und wird bereits vom WordPress-Gutenberg-Editor unterstützt.
img {
border-radius: 8px;
}
oder
<img style="border-radius:100px;" width="200" height="200" src="…" />
Button mit border-radius
Die Button, die uns die Browser zur Verfügung stellen, sind schlicht und klein. Setzen wir eine größere Schrift ein, vergrößert sich auch der Button, aber wirkt schlicht und eckig.
border-radius allein reicht nicht, sondern auch die border-Eigenschaft und der Hintergrund können eine leichte Auffrischung brauchen.
.simplebutton {
font-size: 1em;
padding:0 1em;
height: 2.4em;
border-radius: 1.2em;
border: 1px solid #ddd;
background-image: linear-gradient(to bottom, #efefef 30%, #ccc 80%);
text-transform: uppercase;
letter-spacing:1px;
color:#777;
text-shadow: 1px 1px 4px #fff;
font-weight:bold;
}
Der Button bekommt eine feste Höhe – 2em in diesem Beispiel. Mit einer festen Höhe von 2em und border-radius:1em oder 50% entsteht die perfekte Abrundung. Für den Glanz sorgt background-image mit einem Verlauf.
text-transform:uppercase versetzt die Inschrift des Buttons in Großbuchstaben oder Versalien. Fast immer sind längere Wörter in Großbuchstaben und Fettschnitt besser lesbar, wenn der Abstand zwischen den Buchstaben leicht vergrößert wird.
CSS – Kreise mit border-radius
Wenn border-radius halb so groß ist wie die Breite/Höhe des Bildes, entsteht ein Kreis. Kombinieren wir border-radius mit box-shadow, entstehen Buttons.
.buttonDown, .buttonUp {
width:100px; height:100px; display:inline-block;
background: hsl(50,98%,80%);
border-radius: 50% }
.buttonDown {box-shadow: 4px 4px 10px hsl(50,90%,30%) inset }
.buttonUp {box-shadow: 4px 4px 10px hsl(50,90%,30%) }
Abgekantete Ecken mit linear-gradient
CSS gradient bringt ja jeden Tag neue Effekte hervor. Also: abgekantete Ecken (»beveled corners«)
.beveled {
width: 80%; height: 100px; margin-left: auto; margin-right: auto;
background:
linear-gradient(135deg, transparent 10px, hsl(45, 96%, 80%) 0) top left,
linear-gradient(225deg, transparent 10px, hsl(45, 96%, 80%) 0) top right,
linear-gradient(315deg, transparent 10px, hsl(45, 96%, 80%) 0) bottom right,
linear-gradient(45deg, transparent 10px, hsl(45, 96%, 80%) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
