Styl obramowania jako linia wklęsła prosta (border-style: inset)

Question

Witam.

Chciałbym do każdego obramowania ustalić kolor, ale prawy i dolny kolor obramowania jest zbyt rozjaśniony:

.border-image2
{
	border-width: 18px;
	border-style: inset;
	border-color: #000000 #FF0000 #008000 #414141;
	width: 64px;
	height: 48px;
	outline: 2px solid #000000;
}

W praktyce wygląda to następująco:

Górny kolor obramowania ustalony jako kolor czarny #000000 (jest ok)

Prawy kolor obramowania ustalony dla testu jako kolor czerwony #FF0000 (zrobił sie jasnoczerwony)

Dolny kolor obramowania ustalony dla testu jako kolor zielony #008000 (zrobił sie jasnozielony)

Lewy kolor obramowania ustalony jako ciemnoszary #414141 (jest ok)

 

Pewnie ten inset jest tak ustalony i nie da sie tego przeskoczyć.

Byłoby dobrze, gdyby dałoby sie bez żadnych rozjaśnień ustalać kolory w prawym i dolnym obramowaniu.

Chciałbym, aby prawe + dolne obramowanie wyglądało tak samo jak lewe + górne. Wtedy bedzie to fajnie wyglądało.

Jak zrobić, aby prawy i dolny kolor obramowania nie był zbyt rozjaśniony przy tym inset?

Comments

Z tymże, gdy pobiorę jakiś border z neta i zapiszę w CSS:

border-image-source: url(obrazki/border.png);

to pojawi sie problem z umieszczeniem obrazka w środku tego borderu. Jak zrobić, aby obrazek pojawił sie w środku tego borderu nie ustalając pozycjonowania (left, top, right, bottom)? Chodzi mi o to, aby obrazek pojawił się AUTOMATYCZNIE w borderze. Ewentualnie stosując wyśrodkowanie.

---

w sensie? jakieś foto najlepiej

---

Podasz jakąś fajną stronę ze zdjęciami borderów? Bo nic ciekawego nie znalazłem. Jedynie tylko jakieś animowane bordery.

---

nigdy nie korzystałem z customowych borderów więc nie jestem w stanie

---

Przykładowe foto:

To foto ma rozdzielczość 423x479. Mogę je zmniejszyć do rozdzielczości 74x84, aby w miejscu zielonego tła pojawił się obrazek.

W miejscu gdzie jest zielone tło, ma się pojawić obrazek o rozdzielczości 64x48. Rozdzielczość obrazka ma zostać nienaruszona.

Wiesz jak zrobić, aby obrazek pojawił sie w miejscu tego zielonego tła nie ustalając pozycjonowania (left, top, right, bottom)?

Chodzi mi o to, aby obrazek pojawił się AUTOMATYCZNIE w miejscu tego zielonego tła. Ewentualnie stosując wyśrodkowanie.

Od razu dodam, że nie mam zamiaru tego robić w żadnym programie graficznym, tylko w HTML + CSS.