Jak zmienić kolor zaokrąglenia rogów w wewnątrz danego elementu?

Question

Witam.

Jak zmienić kolor zaokrąglenia rogów w wewnątrz danego elementu na dole po lewej, na dole po prawej i na górze po prawej? Kolor tła elementu jest czarny i chciałbym, aby w wewnątrz tego elementu był cienka linia koloru pomarańczowego. Dla próby zrobiłem test zaokrąglenia rogu na dole po lewej, ale niestety nie ma żadnego efektu.

Mam taki zapis w CSS, ale gdzieś jest błąd:

.panel-2
{
	width: 1000px;
	height: 322px;
	background-color: #000000;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	border-top-right-radius:.5em;
	border-bottom-left-radius: 2px solid #F36742;
}

 

Answer 1

Nie ma CSSowej możliwości kolorowania narożników. Pozostaje Ci opcja border-bottom-color:

Jeśli chcesz kolorowy narożnik wstaw to jako grafikę albo blok z naroznikami i przezroczystością. Jeśli blok nadrzędny ma jakąś klikalną zawartość to zmniejsz z-index dla pseudo borderów.

Jeśli chcesz. aby border znajdował się od środka danego elementu : 

box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

Comments

Poprawiłem zapis i teraz jest dobrze:

.panel-2
{
	width: 1000px;
	height: 322px;
	background-color: #000000;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	border-top-right-radius:.5em;
	border-bottom: 2px solid #F36742;
	border-left: 2px solid #F36742;
	border-right: 2px solid #F36742;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Wielkie dzięki za pomoc.

---

A ten zapis w CSS:

box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

jest obsługiwany przez wszystkie przeglądarki (Google Chrome, Mozilla Firefox, IE itd)?

Bo jeśli nie, to w width wpiszę o 4 piksele mniej na szerokości oraz w height wpiszę o 2 piksele mniej na wysokości i będzie ten sam efekt.

width: 996px;
height: 320px;

 

---

http://caniuse.com/#feat=css3-boxsizing

vendorów nie trzeba

Answer 2

border-bottom-left-radius: 2px solid #F36742;

border-radius przyjmuje tylko wartości zaokrąglenia rogów.

Nie da się w CSS.