Utilizator:   Parola:  

Cum facem IE sa suporte border-radius

de catre pixeldublu pe Sep.24, 2010, in Resurse, Tutoriale

Pentru cei care nu stiu border-radius ne ajuta sa rotunjim colturile unui element html. Daca vedeti divuri co borduri frumos rotunjite pe unele siteuri sa tineti minte ca marea majoritate sunt facute cu CSS.

Majoritatea browserelor au deja implementat ori CSS ori alternative cum ar fi mozilla, webkit ( opera ) sau khtml ( linux ) dar bunul si prea popularul Internet Explorer ca deobicei este cu 100 de ani in urma si aceasta optiune nu exista.

Dar cu ajutorul unui component .htc putem adauga unele optiuni CSS 3 in IE 6 ,7 etc.
PIE.htc ( Download )

Astfel putem adauga borduri rotunjite in IE folosind codul:
border-radius: 5px;
behavior: url(PIE.htc);


In unele cazuri s-ar putea sa dispara elementul. Daca ati patit asa ceva adaugati un:
position: relative;

Pentru alte browsere adaugati asa:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;


Iar daca vreti doar un anumit colt sa fie rotunjit puteti specifica exact asa:
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;

, , ,

6 Comentarii

  • TheKiller

    WoW Omule iti Multumesc Foarte mult pentru aceasta informatie !
    (am mai vizitat http://css3pie.com/ dar nu am stat indeajuns sa vad ce naiba zic >,<)

    Nu Credeam Ca asa ceva poate fi posibil ! O-O
    am crezut ca trebuie ca utilizatorul browserului trebuie sa isi adauge acele fisiere ca un fel de Addon :|

    Sper ca pe viitor cineva va scrie un script mai avansat care sa permita folosirea a HTML5 Si CSS3 in Browsere invechite si mizerabile ca Acest IE !

    Apropo..
    Se pare ca nu suporta text-shadow dar suporta box-shadow O-o
    oare o fi greu de replicat si text-shadow ? :-?

  • pixeldublu

    Parerea mea pe viitor sper ca lumea sa nu mai foloseasca jeguri de browsere invechite :)

    Cat despre text shadow… eu zic sa zicem sarumana ca merge box shadow. Oricum inca nu e 100 % functional peste tot :(

  • designarti

    Lumea o sa foloseasca browsere invechite oricum. Problema e Microsoft, nu a end-userului. Ar trebui facute browsere care sa se updateze sau inlocuiasca automat. Ma indoiesc ca resursele hardware pot cauza probleme de… update browser.

  • Ovidiu

    Be smart. Use Open Source.

  • Valentin

    Salut. Am incercat si eu sa rezolv poblmema border radius-ului pentru IE, prin solutia oferita de tine, dar din pacate nu vrea sa mearga! Ai cumva vreo idee?

Raspunde la acest articol: