Runda hörn med CSS

Runda hörn på bloggen kan man skapa antingen med hjälp av bilder, eller så använder man sig av CSS.

Det absolut lättaste sättet är att använda sig av CSS, för då sköts allt med kod, istället för att man måste skapa olika typer av bilder.

Så här kan ett exempel se ut:

Den här rutan har runda hörn, men du kan bara se det om du har en nyare version av webbläsare.

Dock så finns det lite begränsningar i det hela och det är att man måste ha en nyare version av webbläsare för att det ska synas. Har man t ex en äldre version av Internet Explorer så funkar det inte, men förhoppningsvis så uppdaterar folk sina webbläsare med tiden, så då kan man ju använda sig av detta.

Så här gör man:

1. Kopiera koden nedanför:

-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 15px; /* FF1-3.6 */
border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+
*/

 

2. Lägg in koden i din stilmall, i det element som du vill ska ha rundade hörn.
Om du vill att din wrapper ska ha runda hörn, då lägger du in koden i stilmallen där du har koden för wrapper.


Om du vill göra själva böjen i hörnet mindre eller större, då ändrar du värdet som i exemplet är 15px.

Svårare än så är det inte.

Lycka till!

Dock så går det inte om man har en header-bildspel. Kanske kan gå. Pröva dig fram!



Kommentarer

Kommentera inlägget här:

Vad heter du?
Kom ihåg mitt namn?

Mejl (visas bara för mig)

Din blogg:

Kommentar: